MarcSkovMadsen commented 11 months ago

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

[x] Create script to convert apps
[x] Update script that creates index.md file to include link to apps (See below)
[x] Create hatch shortcut commands
[x] 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)
- [x] Ask twitter for help. Done: https://x.com/MarcSkovMadsen/status/1710894175418188096?s=20
[ ] 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

ImportError

codecov-commenter commented 11 months ago

Codecov Report

All modified lines are covered by tests :white_check_mark:

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

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

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #33 +/- ## ======================================= Coverage ? 98.41% ======================================= Files ? 2 Lines ? 63 Branches ? 0 ======================================= Hits ? 62 Misses ? 1 Partials ? 0 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

MarcSkovMadsen commented 11 months ago

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/openai@4.11.1/+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.

MarcSkovMadsen commented 11 months ago

Superseeded by #73

holoviz-topics / panel-chat-examples

Add Pyodide Apps (EXPERIMENTAL) #33

Todo

Docs

ImportError

Codecov Report

OpenAI Mock Experiments.

Server Side Python Code

Client Side Javascript+Pyodide code