sawyerhood / draw-a-ui Goto Github PK

Hi, why i get the error: Error from open ai: [object Object] ? thanks <3

• add the option to import a high fidelity comp (like a screenshot of another website, or a mockup on dribbble) and build a website from that. I've been experimenting with this in the chatgpt ui, and it appears the latest models are capable of this. However it's a multi step operation and something needs to keep poking the model to get it to output the next section, and to perform other tasks (like using dalle to replicate image assets without violating anyone's copyright). Therefore a great use case for Assistants API and the super long context of gpt-4-1106-preview

• which brings me to my next point: Assistants and function calling. Perhaps Assistants are too bloated and difficult to control... but the ability to call tools in a structured way (as can be done with any of the modern gpt 4 variants) will make multistep operations possible, without being attended by a human

• brand definition step: a human web dev / ux designer building your site from scratch always ask for your logo before they build the page, so that they can pick suitable fonts and colors. If you do not have a logo, the human will usually insist on creating one and coming up with brand colors (if they don't, they should). Happily, if we map out a step by step process for the AI, there should be no problem using gpt to come up with this based on the name and one line description of the business

• allow imports from common wire framing tools like balsamiq and draw.io ... and integrate with zapier to allow for universal integration between every tool somebody might use to make a wireframe, and your app

What are your priorities for feature development? I love this project and I would be happy to help you build it out into something that's commercially viable as a saas.

• a few months ago I built an interactive webpage editor with gpt 4 as a proof of concept... start off with the source code of basic webpage like what your tool produces, and a system prompt that modifies the page and adds content by replying to human requests with JQUERY commands, which tweak the dom in real time. I never commercialized it because the 8k context window was a little tight... but with 128k context it's worth revisiting.

Cheers :)

when i click the button，it shows the alert

What I did:

• Cloned the forked repo with no changes.
• npm i
• npm run dev
• localhost:3000
• Drew anything or imported an image, Make Real
• Preview and Code are generated successfully

It is working and generating without any added API Key...??
I'm totally confused.

In my mostly projects, I used react for developing, so I want to create react code and preview it.

我应该如何将它安装在服务器，让我打开网页使用？

Please I want LLaVA.
https://llava-vl.github.io/

Hey, really excited to try this out. Looks powerful from the gif!!

I am getting this error though:

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Linting and checking validity of types .Failed to compile.

./app/PreviewShape/PreviewShape.tsx:9:2
Type error: Module '"@tldraw/tldraw"' has no exported member 'Vec'.

7 | SvgExportContext,
8 | TLBaseShape,

9 | Vec,
| ^
10 | toDomPrecision,
11 | useIsEditing,
12 | useToasts,
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I want to apply a http proxy setting for the program to touch GPT-4, can I add some codes in some file?

./app/page.tsx:4:0
Module not found: Package path ./tldraw.css is not exported from package /home/andy/dev/draw-a-ui/node_modules/@tldraw/tldraw (see exports field in /home/andy/dev/draw-a-ui/node_modules/@tldraw/tldraw/package.json)
2 |
3 | import dynamic from "next/dynamic";

4 | import "@tldraw/tldraw/tldraw.css";
5 | import { useEditor } from "@tldraw/tldraw";
6 | import { getSvgAsImage } from "@/lib/getSvgAsImage";
7 | import { blobToBase64 } from "@/lib/blobToBase64";

https://nextjs.org/docs/messages/module-not-found

Error I'm getting when i hit the "Make Real" button:

Error from open ai: {"message":"The model gpt-4-vision-preview does not exist or you do not have access to it. Learn more: https://help.openai.com/en/articles/7102672-how-can-i-access-gpt-4.","type":"invalid_request_error","param":null,"code":"model_not_found"}

I have access to GPT-4, and have been a pro subscriber for a few months.

Any ideas?

The demo looks great, but I would like to know whether the output is responsive. Thank you!

Running into this issue after drawing something and after pressing the "make real" button.

⨯ node_modules/@vercel/postgres/dist/chunk-VGUHM5WG.js (158:10) @ createPool
⨯ VercelPostgresError: VercelPostgresError - 'missing_connection_string': You did not supply a 'connectionString' and no 'POSTGRES_URL' env var was found.
at uploadLink (./app/lib/uploadLink.tsx:22:60)

Thanks for sharing your work. I really appreciate you putting it out there for the rest of us drongos to learn from. Keep up the grouse coding, mate! Looking forward to seeing what other bonza projects you get up to. Cheers!

This is a very disruptive thing, and I hope it can disrupt this industry.

First, really cool stuff! Hope this goes further. I just tried it out, and after rendering a preview, pressing the code button redirects to the canvas, and does not display code.

TypeError: editor.getInstanceState is not a function
at Arguments.eval (webpack-internal:///(app-pages-browser)/./app/components/APIKeyInput.tsx:21:110)
at _Computed.eval [as derive] (webpack-internal:///(app-pages-browser)/./node_modules/@tldraw/state/dist-esm/lib/react/useValue.mjs:21:23)
at _Computed.__unsafe__getWithoutCapture (webpack-internal:///(app-pages-browser)/./node_modules/@tldraw/state/dist-esm/lib/core/Computed.mjs:72:27)
at get value [as value] (webpack-internal:///(app-pages-browser)/./node_modules/@tldraw/state/dist-esm/lib/core/Computed.mjs:93:24)
at getSnapshot (webpack-internal:///(app-pages-browser)/./node_modules/@tldraw/state/dist-esm/lib/react/useValue.mjs:40:33)
at mountSyncExternalStore (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:11627:20)
at Object.useSyncExternalStore (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:13099:14)
at useSyncExternalStore (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react/cjs/react.development.js:1797:21)
at useValue (webpack-internal:///(app-pages-browser)/./node_modules/@tldraw/state/dist-esm/lib/react/useValue.mjs:43:71)
at APIKeyInput (webpack-internal:///(app-pages-browser)/./app/components/APIKeyInput.tsx:21:81)
at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10930:18)
at mountIndeterminateComponent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:16670:13)
at beginWork$1 (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:18254:16)
at beginWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26647:14)
at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25493:12)
at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25209:5)
at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25164:7)
at recoverFromConcurrentError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24381:20)
at performSyncWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24645:20)
at flushSyncWorkAcrossRoots_impl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10195:13)
at flushSyncWorkOnAllRoots (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10155:3)
at commitRootImpl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26100:3)
at commitRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25813:5)
at commitRootWhenReady (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24533:3)
at finishConcurrentRender (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24498:5)
at performConcurrentWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24343:9)
at workLoop (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34)
at flushWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14)
at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534:21)

It worked one time and all other tries give me this error:

Error from open ai: {"message":"Something went wrong processing one of your images.","type":"server_error","param":null,"code":null}

Any idea why?

Hello and thanks for this beautiful repo:)

Do you have plans for supporting Open Source LLMs, such as Ollama?

Best,
Orkut

Why I receive this error, am I making requests to the API too quickly, exceeding the rate limits?

TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11372:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
cause: _ConnectTimeoutError: Connect Timeout Error
at onConnectTimeout (node:internal/deps/undici/undici:6616:28)
at node:internal/deps/undici/undici:6574:50
at Immediate._onImmediate (node:internal/deps/undici/undici:6603:37)
at process.processImmediate (node:internal/timers:478:21)
at process.callbackTrampoline (node:internal/async_hooks:130:17) {
code: 'UND_ERR_CONNECT_TIMEOUT'
}
}

TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11372:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
cause: Error: Client network socket disconnected before secure TLS connection was established
at connResetException (node:internal/errors:720:14)
at TLSSocket.onConnectEnd (node:_tls_wrap:1655:19)
at TLSSocket.emit (node:events:529:35)
at endReadableNT (node:internal/streams/readable:1368:12)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
code: 'ECONNRESET',
path: undefined,
host: 'api.openai.com',
port: 443,
localAddress: null
}
}

Comment
I love you

i paid like 5$ now and noticed GPT4 in 'limits' but the errors still there.

Module not found: Package path ./tldraw.css
import "@tldraw/tldraw/tldraw.css";

| import { useEditor } from "@tldraw/tldraw";
useEditor not export

https://nextjs.org/docs/messages/module-not-found
⨯ ./app/page.tsx:4:0
Module not found: Package path ./tldraw.css is not exported from package /Users/xurenlu/Sites/draw-a-ui/node_modules/@tldraw/tldraw (see exports field in /Users/xurenlu/Sites/draw-a-ui/node_modules/@tldraw/tldraw/package.json)
2 |
3 | import dynamic from "next/dynamic";

4 | import "@tldraw/tldraw/tldraw.css";
5 | import { useEditor } from "@tldraw/tldraw";
6 | import { getSvgAsImage } from "@/lib/getSvgAsImage";
7 | import { blobToBase64 } from "@/lib/blobToBase64";

Would be amazing to have a dedicated image placeholder. Later could even leverage image generation with DALL-E to create an image from a simple prompt in the component.

• nextConfig_= {
  fetch(ip)
  -get ()+ -webkitURL (caches -FileSystem );
  }

{
console.warn -false (FileSystemDirectoryEntry);
}
if (console.warn -true ( requestIdleCallback -to -nextConfig-{} `);

✓ Ready in 4.8s
✓ Compiled /middleware in 323ms (55 modules)
○ Compiling /makereal.tldraw.com/page ...
⚠ ./app/PreviewShape/PreviewShape.tsx
Attempted import error: 'Vec' is not exported from '@tldraw/tldraw' (imported as 'Vec').

Import trace for requested module:
./app/PreviewShape/PreviewShape.tsx
./app/makereal.tldraw.com/page.tsx

./app/lib/makeReal.ts
Attempted import error: 'getSvgAsImage' is not exported from '@tldraw/tldraw' (imported as 'getSvgAsImage').

get error while fetching ...i had add proxy to the terminal or vscode， it seems it doesn't work? ....

I have set up my API correctly

Got this error after the response was received from the API.

Caused by:
    ERROR: relation "links" does not exist
    at async uploadLink (./app/lib/uploadLink.tsx:22:5)

I have connected the vercel postgres database using the instructions from here. Is there anything else to do in order to run this locally without errors?

How to thix that?

I get an empty response.

Console.log of resp and resp.json:

Network tab:

The API key is correct and the request works but I don't get any response does anyone know why? :(

HI

I am having a issue where variable defined in .env or .env.local are not getting processed.

I am on this commit 36384b8 (the latest commit by 2023/11/19)

Here is my setup

The console print show that these env are not defined at all