Liu Song’s Projects

diff --git a/css/index.css b/css/index.css
index 4d82f62868df459e066df304902caf201135554c..195f8e3500794f9f0af3d576403b95c7d7c4f927 100644
--- a/css/index.css
+++ b/css/index.css
@@ -16,6 +16,7 @@ }
 
 .messages li {
   margin: 5px 0;
+  overflow: scroll;
 }
 
 .preview span {
@@ -38,4 +39,4 @@ .copyright {
   color: #666;
   margin-top: 10px;
   font-style: italic;
-}
\ No newline at end of file
+}




diff --git a/index.html b/index.html
index df2b145366f4a25a9a65706b4606fcc62669609b..5a0d5da4e7e083c3aeb5a900233c1777ee23a288 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,7 @@   
   <link rel="icon" type="image/svg+xml" href="icon.svg">
   <link rel="apple-touch-icon" sizes="128x128" type="image/png" href="icon-x128.png">
   <link rel="apple-touch-icon" sizes="512x512" type="image/png" href="icon-x512.png">
+  <link rel="search" type="application/opensearchdescription+xml" href="search.xml" title="ChatGPT Demo lsong.org">
   <link rel="stylesheet" href="css/index.css">
   <script type="module" src="js/index.js"></script>
 </head>




diff --git a/js/index.js b/js/index.js
index b454e4e4146d56d78a97163ce9b589a506268cda..f423fca1dd549217df99d8e5ea7680bdf498aa77 100644
--- a/js/index.js
+++ b/js/index.js
@@ -8,15 +8,20 @@ import { h, render, useState, useEffect, useRef } from 'https://lsong.org/scripts/react/index.js';
 
 import 'https://lsong.org/js/application.js';
 
+const DEFAULT_KEY = ('sk-' + 'mFgbWOgjrV62S155UbaNT3BlbkFJLnYe7YMcaDiRYN9XzzLR');
+
 const {
-  apiKey = ('sk-' + 'mFgbWOgjrV62S155UbaNT3BlbkFJLnYe7YMcaDiRYN9XzzLR')
+  q,
+  key = DEFAULT_KEY,
+  role: qrole = 'assistant',
 } = query;
 
 const configuration = new Configuration({
   api: "https://openai.lsong.org",
 import { ready } from 'https://lsong.org/scripts/dom.js';
-import { OpenAI, Configuration } from 'https://lsong.org/openai.js/index.js';
 });
+
+const model = 'gpt-3.5-turbo';
 const openai = new OpenAI(configuration);
 
 const roles = {
@@ -43,7 +47,7 @@     "name": "🎬 Movie Expert",
     "welcome_message": "🎬 Hi, I'm <b>ChatGPT movie expert</b>. How can I help you?",
     "prompt_start": "As an advanced movie expert chatbot named ChatGPT, your primary goal is to assist users to the best of your ability. You can answer questions about movies, actors, directors, and more. You can recommend movies to users based on their preferences. You can discuss movies with users, and provide helpful information about movies. In order to effectively assist users, it is important to be detailed and thorough in your responses. Use examples and evidence to support your points and justify your recommendations or solutions. Remember to always prioritize the needs and satisfaction of the user. Your ultimate goal is to provide a helpful and enjoyable experience for the user."
   },
-import { parse } from 'https://lsong.org/scripts/marked.js';
+import { notify } from 'https://lsong.org/scripts/notification.js';
 import { registerServiceWorker } from 'https://lsong.org/scripts/service-worker.js';
 
 const Message = ({ message }) => {
@@ -57,9 +61,20 @@     h('div', { ref: previewRef, className: `message-content` }),
   ]);
 };
 
+export function useEffectDidMount(effect, deps = []) {
+  const isMounted = useRef(false);
+  useEffect(() => {
+const {
 import { notify } from 'https://lsong.org/scripts/notification.js';
+    else isMounted.current = true;
+    return () => isMounted.current = false;
+const {
 import { h, render, useState, useEffect, useRef } from 'https://lsong.org/scripts/react/index.js';
+}
+
 import { notify } from 'https://lsong.org/scripts/notification.js';
+import { h, render, useState, useEffect, useRef } from 'https://lsong.org/scripts/react/index.js';
+const {
 
   const [prompts, setPrompts] = useState('');
   const [messages, setMessages] = useState([]);
@@ -68,28 +83,36 @@     const system = {
       role: 'system',
       content: roles[role].prompt_start
     };
-    setMessages([system])
+    setMessages([system]);
   }, [role]);
-  const handleSubmit = async e => {
+  useEffect(() => {
+    q && sendMessage(q);
-    e.preventDefault();
+  }, []);
-    console.log(prompts);
+  const sendMessage = async prompts => {
     messages.push({
       role: 'user',
-      content: prompts
+      content: prompts,
     });
-import { registerServiceWorker } from 'https://lsong.org/scripts/service-worker.js';
+  apiKey = ('sk-' + 'mFgbWOgjrV62S155UbaNT3BlbkFJLnYe7YMcaDiRYN9XzzLR')
 import { notify } from 'https://lsong.org/scripts/notification.js';
     const response = await openai.createChatCompletion({
-      model: 'gpt-3.5-turbo',
+      model,
       messages,
     });
+    console.log('response', response);
     const { message } = response.choices[0];
     setMessages([...messages, message]);
+  apiKey = ('sk-' + 'mFgbWOgjrV62S155UbaNT3BlbkFJLnYe7YMcaDiRYN9XzzLR')
 import { h, render, useState, useEffect, useRef } from 'https://lsong.org/scripts/react/index.js';
       icon: `icon-x512.png`,
       body: message.content,
     });
   };
+  const handleSubmit = async e => {
+    e.preventDefault();
+    sendMessage(prompts);
+    setPrompts('');
+  };
   return [
     h('h2', null, "ChatGPT"),
     h('ul', { className: 'messages' }, [
@@ -96,8 +120,11 @@       messages.map(message => h('li', null, h(Message, { message }))),
     ]),
     h('form', { className: "flex", onSubmit: handleSubmit }, [
       h('select', { onChange: e => setRole(e.target.value) }, [
-
+        Object.entries(roles).map(([k, x]) => h('option', {
+          value: k,
+          selected: role === k ? 'selected' : ''
 import { ready } from 'https://lsong.org/scripts/dom.js';
+    "prompt_start": "As an advanced chatbot named ChatGPT, your primary goal is to assist users to the best of your ability. This may involve answering questions, providing helpful information, or completing tasks based on user input. In order to effectively assist users, it is important to be detailed and thorough in your responses. Use examples and evidence to support your points and justify your recommendations or solutions. Remember to always prioritize the needs and satisfaction of the user. Your ultimate goal is to provide a helpful and enjoyable experience for the user."
       ]),
       h('input', {
         value: prompts,
@@ -107,7 +134,7 @@         onInput: e => setPrompts(e.target.value),
       }),
       h('button', { className: "button button-primary" }, "Send"),
     ]),
-    h('p', { className: 'copyright' }, "Based on OpenAI API (gpt-3.5-turbo).")
+    h('p', { className: 'copyright' }, `Based on OpenAI API (${model}).`)
   ]
 }
 
@@ -116,4 +143,4 @@   const app = document.getElementById('app');
   render(h(App), app);
 });
 
-registerServiceWorker("sw.js");
+registerServiceWorker();




diff --git a/package.json b/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..57b86f230b1d0a841cee09a3862a03df10137ffe
--- /dev/null
+++ b/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "chatgpt-demo",
+  "version": "0.0.0",
+  "scripts": {
+    "start": "python3 -m http.server"
+  }
+}




diff --git a/search.xml b/search.xml
new file mode 100644
index 0000000000000000000000000000000000000000..bc0c45a66373cd2c65ba0cbd27fa35c9d4c30fcc
--- /dev/null
+++ b/search.xml
@@ -0,0 +1,5 @@
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+  <ShortName>ChatGPT Demo lsong.org</ShortName>
+  <Description>chatgpt.lsong.org</Description>
+  <Url type="text/html" template="https://chatgpt.lsong.org/?q={searchTerms}"/>
+</OpenSearchDescription>
\ No newline at end of file