in1t

reanimatedmanx · Sep 19, 2023 · 3698ce8 · 3698ce8
commit 3698ce8
Show file tree

Hide file tree

Showing 1,562 changed files with 52,284 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+WIP
diff --git a/openv0_server/.env b/openv0_server/.env
@@ -0,0 +1,7 @@
+OPENAI_API_KEY = "YOUR_API_KEY_HERE"
+OPENAI_MODEL = "gpt-4"
+
+CONTEXT_TOKENS_PER_LIBRARY_COMPONENT_LIMIT = 950
+
+REACT_WEBAPP_DIR = "../openv0_vitereact"
+REACT_WEBAP_COMPONENT_PING_INTERVAL_MS = 5000
diff --git a/openv0_server/.gitignore b/openv0_server/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/openv0_server/README.md b/openv0_server/README.md
@@ -0,0 +1 @@
+WIP
diff --git a/openv0_server/_test_modules.js b/openv0_server/_test_modules.js
@@ -0,0 +1,205 @@
+
+
+/*
+const { LocalIndex } = require('vectra')
+const index = new LocalIndex('vectordb_lucide')
+async function db_vectra_build(){
+  const lucide_with_embeddings = require(`./library/lucide_with_embeddings_dump.json`)
+
+  if (!await index.isIndexCreated()) {
+      await index.createIndex();
+  }
+  for (let e of lucide_with_embeddings){
+    console.log(e.name)
+    await index.insertItem({
+        vector: e.embedding,
+        metadata: { name: e.name }
+    })
+  }
+}
+db_vectra_build()
+*/
+
+/*
+const { LocalIndex } = require('vectra')
+const index = new LocalIndex('vectordb_lucide')
+async function db_vectra_query_test(){
+  const lucide_with_embeddings = require(`./library/lucide_with_embeddings_dump.json`)
+
+  const example = lucide_with_embeddings[500]
+  console.log(`> ${example.name}`)
+  const results = await index.queryItems( example.embedding , 6);
+  console.dir(results.slice(1,).map(e=>e.item.metadata) )
+}
+db_vectra_query_test()
+*/
+
+
+/*
+const db_shadcn = require(`./modules/db/shadcn.js`)
+const db_lucide = require(`./modules/db/lucide.js`)
+
+
+async function test(){
+  await db_shadcn.build()
+  // await db_lucide.build()
+  // await db_lucide.embeddings() //<------- calls ada-002 in batch !
+}
+test()
+*/
+
+
+
+/*
+const component_design_task = require(`./modules/multipass/component_design_task.js`)
+async function test(){
+  const queries = [
+    `a tweet UI`,
+    `a pricing page for a SaaS`,
+    `a component that displays a simple paragraph`,
+    `a cookie consent banner`,
+    `a table of financial invoices`,
+  ]
+
+  console.dir(
+    (
+      await component_design_task.run({
+        query: queries[0],
+      })
+    ),
+    {depth:null}
+  )
+
+}
+test()
+*/
+
+
+/*
+const rag_icons = require(`./modules/multipass/rag_icons.js`)
+async function test(){
+  console.dir(
+    (
+      await rag_icons.run({
+        icons: [`cookies` , `new notification`, `friend request`],
+      })
+    ),
+    {depth:null}
+  )
+
+}
+test()
+*/
+
+/*
+const rag_library_components = require(`./modules/multipass/rag_library_components.js`)
+async function test(){
+  console.dir(
+    (
+      await rag_library_components.run({
+        components: [`Avatar` , `Button`],
+      })
+    ),
+    {depth:null}
+  )
+
+}
+test()
+*/
+
+/*
+const context_builder = require(`./modules/multipass/context_builder.js`)
+async function test(){
+  console.log(
+    JSON.stringify(
+      await context_builder.run({
+        icons: [`checkmark`],
+        library_components: [ {name: `Card`} , {name: `Button`} ],
+      })
+    )
+  )
+
+}
+test()
+*/
+
+
+
+
+
+/*
+const design_task = require(`./modules/multipass/design_task.js`)
+const context_builder = require(`./modules/multipass/context_builder.js`)
+const generate_component = require(`./modules/multipass/generate_component.js`)
+async function test(){
+
+
+  const task = await design_task.run({
+    query: `a component that display an example Lorem Ipsum paragraph (write it)`
+  })
+  console.dir(task)
+
+
+
+  const task = {
+    name: 'TweetUI',
+    description: {
+      by_user: 'a tweet UI component',
+      by_llm: "Design a new React component that's styled in a similar fashion to a tweet on Twitter. It should include a user profile picture (Avatar), the user's name, the tweet text, a timestamp, and options for reply, retweet, like, and share a tweet. It should also show the number of replies, retweets, and likes. All the information will be passed via props."
+    },
+    icons: [ 'reply', 'retweet', 'heart', 'share' ],
+    library_components: [
+      { name: 'Avatar', usage: "To display the user's profile picture." },
+      {
+        name: 'Card',
+        usage: 'To structure and organize the tweet information.'
+      },
+      {
+        name: 'Button',
+        usage: 'To create interactive reply, retweet, like, and share buttons.'
+      },
+      {
+        name: 'Label',
+        usage: 'To give more information about displayed data such as number of replies, retweets, or likes.'
+      }
+    ]
+  }
+
+
+  const context = await context_builder.run(task)
+  // console.dir(context)
+  const generated = await generate_component.run({task,context})
+
+
+}
+test()
+*/
+
+
+
+
+
+
+
+
+/*
+const generate = require(`./generate.js`)
+async function test(){
+
+
+
+  await generate.new_component({
+    query: `A Notes app UI looks like Apple's, in a yellow theme color`
+  })
+
+
+  await generate.iterate_component({
+    componentId: `NotesApp_ts24v`,
+    query: `the left half of the layout should be at the bottom instead !`,
+  })
+
+
+
+}
+test()
+*/
diff --git a/openv0_server/export_refresh.js b/openv0_server/export_refresh.js
@@ -0,0 +1,8 @@
+// to rebuild components in webapp;
+// ie after you delete components, run node refresh_webapp.js
+
+async function refresh(){
+  const export_react = require(`./modules/export/react.js`)
+  await export_react.dump_webapp()
+}
+refresh()
diff --git a/openv0_server/generate.js b/openv0_server/generate.js
@@ -0,0 +1,125 @@
+const fs = require('fs')
+
+const design_task = require(`./modules/multipass/design_task.js`)
+const iterate_task = require(`./modules/multipass/iterate_task.js`)
+
+const context_builder = require(`./modules/multipass/context_builder.js`)
+const generate_component = require(`./modules/multipass/generate_component.js`)
+
+const export_react = require(`./modules/export/react.js`)
+
+function _randomId(length) {
+    let result = '';
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+    let counter = 0;
+    while (counter < length) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+      counter += 1;
+    }
+    return result;
+}
+
+async function new_component(req) {
+  // {query}
+
+
+  const task = await design_task.run(req) // -> { name, description{by_user,by_llm}, icons, library_components }
+  const context = await context_builder.run(task) // -> context[]
+  const code = await generate_component.new_component({task,context}) // -> generated_code
+
+
+  /*
+  const task = { name:`Dummy` , description: {by_user: `dummy prompt`} }
+  const code = `import something_dummy;`
+  */
+
+  const componentId = task.name.replaceAll(' ','') + `_` + _randomId(5)
+  const timestamp = Date.now()
+
+  await export_react.save_component({
+    componentId,
+    slug: componentId.toLowerCase(),
+    name: task.name,
+    prompt: task.description.by_user,
+    timestamp,
+    version: `${timestamp}`,
+    code,
+  })
+  await export_react.dump_webapp()
+  return {
+    componentId,
+    version: `${timestamp}`,
+    code,
+  }
+}
+async function iterate_component(req) {
+  // {query : `user_query` , componentId ,}
+
+  // fetch last version of component
+  const components_list = fs.readdirSync(`./generated/components/${req.componentId}`).filter(e=>e.endsWith(`.json`)).sort()
+  const previous_component = {
+    ...JSON.parse( fs.readFileSync(`./generated/components/${req.componentId}/${components_list.slice(-1)[0]}`,'utf-8') ),
+    code: fs.readFileSync(`./generated/components/${req.componentId}/${components_list.slice(-1)[0].split('.')[0]}.tsx`,'utf-8'),
+  }
+  const first_component = {
+    ...JSON.parse( fs.readFileSync(`./generated/components/${req.componentId}/${components_list[0]}`,'utf-8') ),
+    code: fs.readFileSync(`./generated/components/${req.componentId}/${components_list[0].split('.')[0]}.tsx`,'utf-8'),
+  }
+
+  const iteration_task = await iterate_task.run({
+    query: req.query,
+    previous: {
+      name: previous_component.name,
+      description: first_component.prompt,
+    },
+  }) // -> { name, description{by_user,by_llm}, icons, library_components }
+
+  const task = {
+    name: previous_component.name,
+    ...iteration_task
+  }
+  const iteration_context = await context_builder.run(task) // -> context[]
+  const context = [
+    ...iteration_context,
+    /*
+    {
+      role: `user`,
+      content: ``,
+    },
+    */
+  ]
+
+  const code = await generate_component.iterate_component({
+    task,
+    context,
+    previous: {
+      description: first_component.prompt,
+      code: previous_component.code,
+    },
+  }) // -> generated_code
+
+  const componentId = req.componentId
+  const timestamp = Date.now()
+
+  await export_react.save_component({
+    componentId,
+    slug: componentId.toLowerCase(),
+    name: task.name,
+    prompt: task.description.by_user,
+    timestamp,
+    version: `${timestamp}`,
+    code,
+  })
+  await export_react.dump_webapp()
+  return {
+    componentId,
+    version: `${timestamp}`,
+    code,
+  }
+
+}
+module.exports = {
+  new_component,
+  iterate_component,
+};
diff --git a/openv0_server/generated/components/CodeSnippet_x7n4c/1695072566017.json b/openv0_server/generated/components/CodeSnippet_x7n4c/1695072566017.json
@@ -0,0 +1 @@
+{"componentId":"CodeSnippet_x7n4c","slug":"codesnippet_x7n4c","name":"CodeSnippet","prompt":"write a code snippet component with an example ffmpeg shell snippet and a description of what it does. text should be font-mono.\nmaybe some icon next to the code snippet block.\nadd a copy to clipboard button on the bottom right of the component.\nit should be a sleek, beautiful, well-arranged component;","timestamp":1695072566017,"version":"1695072566017","code":"import React, { useState, useCallback } from 'react';\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Clipboard } from \"lucide-react\";\n\nconst CodeSnippet = () => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const exampleCode = `ffmpeg -i input.mp4 -vf \"scale=640:480\" output.mp4`;\n\n  const handleCopy = useCallback(() => {\n    navigator.clipboard\n      .writeText(exampleCode)\n      .then(() => setIsCopied(true))\n      .catch(() => setHasError(true));\n  }, []);\n\n  return (\n    <Card className=\"dark:bg-gray-800 p-4 rounded-lg relative\">\n      <CardHeader>\n        <CardTitle className=\"font-mono text-xl pb-2\">FFmpeg shell snippet</CardTitle>\n        <CardDescription className=\"font-mono pb-4\">This code scales the video to 640x480 resolution</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <pre className=\"font-mono text-sm p-4 dark:bg-gray-700 rounded bg-gray-200\">{exampleCode}</pre>\n      </CardContent>\n      <CardFooter className=\"flex flex-row-reverse mt-4\">\n        <Button variant=\"outline\" onClick={handleCopy}>\n          <Clipboard className=\"h-4 w-4 mr-2 inline-block\" />\n          {isCopied ? \"Copied!\" : \"Copy to clipboard\"}\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n};\n\nexport default CodeSnippet;"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"componentId":"CodeSnippet_x7n4c","slug":"codesnippet_x7n4c","name":"CodeSnippet","prompt":"write a code snippet component with an example ffmpeg shell snippet and a description of what it does. text should be font-mono.\nmaybe some icon next to the code snippet block.\nadd a copy to clipboard button on the bottom right of the component.\nit should be a sleek, beautiful, well-arranged component;","timestamp":1695072566017,"version":"1695072566017","code":"import React, { useState, useCallback } from 'react';\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { Clipboard } from \"lucide-react\";\n\nconst CodeSnippet = () => {\n const [isCopied, setIsCopied] = useState(false);\n\n const exampleCode = `ffmpeg -i input.mp4 -vf \"scale=640:480\" output.mp4`;\n\n const handleCopy = useCallback(() => {\n navigator.clipboard\n .writeText(exampleCode)\n .then(() => setIsCopied(true))\n .catch(() => setHasError(true));\n }, []);\n\n return (\n <Card className=\"dark:bg-gray-800 p-4 rounded-lg relative\">\n <CardHeader>\n <CardTitle className=\"font-mono text-xl pb-2\">FFmpeg shell snippet</CardTitle>\n <CardDescription className=\"font-mono pb-4\">This code scales the video to 640x480 resolution</CardDescription>\n </CardHeader>\n <CardContent>\n <pre className=\"font-mono text-sm p-4 dark:bg-gray-700 rounded bg-gray-200\">{exampleCode}</pre>\n </CardContent>\n <CardFooter className=\"flex flex-row-reverse mt-4\">\n <Button variant=\"outline\" onClick={handleCopy}>\n <Clipboard className=\"h-4 w-4 mr-2 inline-block\" />\n {isCopied ? \"Copied!\" : \"Copy to clipboard\"}\n </Button>\n </CardFooter>\n </Card>\n );\n};\n\nexport default CodeSnippet;"}