improvements to prompts

README.md

@@ -39,20 +39,13 @@ wrtc@npm:0.4.7 couldn't be built successfully
 
 The app will still load just fine.
 
-### Before starting the app
+### BEFORE YOU RUN THE APP /!\
 
-web4 is free, but not OpenAI! You will need to configure your token in a `.env.local` config file:
+This application is based on OpenAI for text and image generation.
 
-```
-cp .env.sample .env.local
-open .env.local
-```
-
-And configure your OpenAI access token key:
+\*You need a valid (billable) OpenAI account before you can use the application.
 
-```
-NEXT_PUBLIC_PROVIDER_OPENAI_API_TOKEN=write_your_openai_key_here
-```
+Upon starting it, you will have to enter you OpenAI token in the configuration panel (the "cog" icon).
 
 ### Running the app in development
 

package.json

@@ -21,7 +21,9 @@
     "dompurify": "^2.4.1",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
+    "fuse.js": "^6.6.2",
     "google-protobuf": "^3.21.2",
+    "gpt-3-encoder": "^1.1.3",
     "http-proxy-middleware": "^2.0.6",
     "ipfs": "^0.65.0",
     "isomorphic-fetch": "^3.0.0",
@@ -34,6 +36,7 @@
     "postcss": "^8.4.19",
     "rc-tabs": "^12.5.5",
     "react": "^18.2.0",
+    "react-children-utilities": "^2.8.0",
     "react-countdown-circle-timer": "^3.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
@@ -42,7 +45,8 @@
     "react-no-ssr": "^1.1.0",
     "tailwind-safelist-generator": "^1.0.0",
     "tailwindcss": "^3.2.4",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "yaml": "^2.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",

src/components/toggle/index.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react'
+
+export const Toggle = ({
+  children,
+  onChange,
+  value,
+}: {
+  children: ReactNode
+  onChange: (value: boolean) => void
+  value?: boolean
+}) => (
+  <label className="relative inline-flex items-center cursor-pointer">
+    <input
+      type="checkbox"
+      checked={value}
+      value={value ? 'true' : 'false'}
+      className="sr-only peer"
+      onChange={(e) => {
+        console.log('checked:', e.target.checked)
+        onChange(Boolean(e.target.checked))
+      }}
+    />
+    <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+    <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-800">
+      {children}
+    </span>
+  </label>
+)