sawyerhood / draw-a-ui Goto Github PK
View Code? Open in Web Editor NEWDraw a mockup and generate html for it
Home Page: https://draw-a-ui.com
License: MIT License
Draw a mockup and generate html for it
Home Page: https://draw-a-ui.com
License: MIT License
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?
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.
How to thix that?
./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";
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)
✓ 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').
{
console.warn -false (FileSystemDirectoryEntry);
}
if (console.warn -true ( requestIdleCallback -to -nextConfig-{} `);
What I did:
npm i
npm run dev
localhost:3000
Make Real
It is working and generating without any added API Key...??
I'm totally confused.
i paid like 5$ now and noticed GPT4 in 'limits' but the errors still there.
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.
Comment
I love you
Why I receive this error, am I making requests to the API too quickly, exceeding the rate limits?
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";
Please I want LLaVA.
https://llava-vl.github.io/
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!
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
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.
Module not found: Package path ./tldraw.css
import "@tldraw/tldraw/tldraw.css";
| import { useEditor } from "@tldraw/tldraw";
useEditor not export
Hello and thanks for this beautiful repo:)
Do you have plans for supporting Open Source LLMs, such as Ollama?
Best,
Orkut
./node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
./node_modules/@radix-ui/react-popper/dist/index.mjs
./node_modules/@radix-ui/react-menu/dist/index.mjs
./node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
./node_modules/@tldraw/tldraw/dist-esm/lib/ui/components/primitives/DropdownMenu.mjs
./node_modules/@tldraw/tldraw/dist-esm/index.mjs
./app/page.tsx
⨯ ./node_modules/@floating-ui/core/dist/floating-ui.core.mjs:1:0
Module not found: Can't resolve '@floating-ui/utils'```
Hi, why i get the error: Error from open ai: [object Object] ? thanks <3
I want to apply a http proxy setting for the program to touch GPT-4, can I add some codes in some file?
我应该如何将它安装在服务器,让我打开网页使用?
This is a very disruptive thing, and I hope it can disrupt this industry.
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
}
}
The demo looks great, but I would like to know whether the output is responsive. Thank you!
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.
Cheers :)
In my mostly projects, I used react for developing, so I want to create react code and preview it.
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?
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'
}
}
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)
I have set up my API correctly
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.