Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Pyodide Apps (EXPERIMENTAL) #33

Closed

Conversation

MarcSkovMadsen
Copy link
Collaborator

@MarcSkovMadsen MarcSkovMadsen commented Oct 8, 2023

THIS IS CURRENTLY AN EXPERIMENT.

BUILDS ON #12. Review that one first.

I wanted to figure out whether we can deploy the apps to Pyodide as discussed on Discord.

Todo

  • Create script to convert apps
  • Update script that creates index.md file to include link to apps (See below)
  • Create hatch shortcut commands
  • Describe in DEVELOPER_GUIDE.md how to convert and serve apps. Preview
  • Test apps
    • Fix ImportError. See below
      • Figure out if this is a real bug or if its just because we are on a mix of alpha versions that do not work together.
  • Figure out if we can mock openai python lib with openai js lib (and similar for other api libs)
  • Figure out how to best include link to app in docs. Where should it be positioned. On text or on the thumbnail?
  • Get review and improve

Docs

image

ImportError

image

@codecov-commenter
Copy link

codecov-commenter commented Oct 8, 2023

Codecov Report

All modified lines are covered by tests ✅

❗ No coverage uploaded for pull request base (main@5b56b23). Click here to learn what that means.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@           Coverage Diff           @@
##             main      #33   +/-   ##
=======================================
  Coverage        ?   98.41%           
=======================================
  Files           ?        2           
  Lines           ?       63           
  Branches        ?        0           
=======================================
  Hits            ?       62           
  Misses          ?        1           
  Partials        ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@MarcSkovMadsen MarcSkovMadsen changed the title Add Pyodide Apps Add Pyodide Apps (EXPERIMENTAL) Oct 8, 2023
@MarcSkovMadsen
Copy link
Collaborator Author

MarcSkovMadsen commented Oct 8, 2023

OpenAI Mock Experiments.

The purpose of these experiments it to "prove" that

  • we can write OpenAI python code that works when running on on a server
  • when the code is converted to pyodide using panel convert we can patch/ mock the javascript/ python/ pyodide code such that it can still run as expected. But now in the browser only

Server Side Python Code

import openai

question="Tell me what HoloViz Panel is in one sentence."
print("Question: ", question)
response = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    messages=[{"role": "user", "content": question}],
    stream=False,
)
print("Answer: ", response["choices"][0]["message"]["content"])

Client Side Javascript+Pyodide code

Insert your own OpenAI apiKey below.

<!doctype html>
<html>
  <head>
      <script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
  </head>
  <body>
    Open your browser console to see Pyodide openai output
    <script type="text/javascript">
        async function main(){
            let OpenAI = await import("https://cdn.jsdelivr.net/npm/[email protected]/+esm")
            let openai = {
                ChatCompletion: {
                    acreate: async function(config){
                        openAI = new OpenAI.OpenAI({ apiKey: "INSERT KEY HERE", dangerouslyAllowBrowser: true });
                        response = await openAI.chat.completions.create(config, { timeout: 60000 })
                        return response
                    }
                }
            }
            let pyodide = await loadPyodide();
            pyodide.registerJsModule("openai", openai);
            pyodide.setDebug(true);
            await pyodide.runPythonAsync(`
                from js import Object
                from pyodide.ffi import to_js
                
                import openai
                
                question="Tell me what HoloViz Panel is in one sentence."
                print("Question: ", question)
                response = await openai.ChatCompletion.acreate(
                    model="gpt-3.5-turbo",
                    messages=to_js([{"role": "user", "content": question}], dict_converter=Object.fromEntries),
                    stream=False,
                )
                print("Answer: ", response.to_py()["choices"][0]["message"]["content"])
            `);
        }
    main();
    </script>
  </body>
</html>

It works except that

  • Some manual conversion between Python and JS is needed
  • The openai javascript library is async. Thus we can only patch or mock Openai Python Async methods.
  • I need to figure out if this can be used securely. I.e. the user would need to input their api key in a password input field. Everything running in their browser only.

image

@MarcSkovMadsen
Copy link
Collaborator Author

MarcSkovMadsen commented Oct 20, 2023

Superseeded by #73

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants