cirediatpl / FigmaChain

FigmaChain is a set of Python scripts that generate HTML/CSS code based on Figma designs. Using OpenAI's GPT-3 model, FigmaChain enables developers to quickly generate HTML/CSS code from a Figma design input. It also includes a Streamlit-based chatbot interface for interactive code generation.
951 stars 87 forks source link

Python error in cmd #1

Open harrisonr98 opened 1 year ago

harrisonr98 commented 1 year ago

Output only displays demo - not the figma design from .env

I removed my OpenAI key and Figma Token from the .env for screenshot purposes

Figma design URL: https://www.figma.com/file/otuSGS6XKMka1pKgEgTX80/Portfolio-(Community)?node-id=0-1&t=zCYLl0Nlue1KyiUH-0

image image image

peterw commented 1 year ago

taking a look right now.

peterw commented 1 year ago

Try something like this:

python generateCode.py register

you need to include an arg, a string that represents the element (like form) that you want to create code for

harrisonr98 commented 1 year ago

Running python generateCode.py register opens output.html with the following text:

"Unfortunately, there is no design context provided for the register page. Can you please provide more information or a design file for me to work with?"

image image

peterw commented 1 year ago

Can you try with a simpler Figma file where there is only one page?

I'm wondering if its because there is multiple pages in the Figma file.

harrisonr98 commented 1 year ago

I get the same error using a one page Figma file (and changing the .env file accordingly)

Here's what I used this time: https://www.figma.com/file/7hMvD66jfqfU4DpSwMpoT9/Free-AI-image-generating-Landing-Page---Midjourney-Inspired-(Community)?node-id=0-1&t=AZWKWw7CvcIMaUdl-0

peterw commented 1 year ago

try this for the first Figma file you provided:

python generateCode.py navbar
harrisonr98 commented 1 year ago

Here's what it created:

image

Is that as intended? It doesn't really look like it is based on the original Figma design.

cirediatpl commented 1 year ago

You can try running the script multiple times to see the result. The design isn’t deterministic.

Also, if you have access to GPT-4 through the API, I highly recommend updating the LLM so it uses GPT-4 instead of gpt-3.5-turbo. The results match the figma file much more closely.

On Apr 30, 2023, at 3:07 PM, harrisonr98 @.***> wrote:

 Here's what it created:

Is that as intended? It doesn't really look like it is based on the original Figma design.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.

harrisonr98 commented 1 year ago

Thanks. It might just be that my input isn't specific enough, and that gpt-3.5 is not the greatest. I noticed a trend when trying other Figma designs that it just takes the image and builds on top of it:

https://www.figma.com/proto/FphPnQNvY0TfTmPxMwnwf8/The-Matte-Engine-(UI-KIT)-(Community)?node-id=0-2&scaling=min-zoom&page-id=0%3A1 image

https://www.figma.com/file/7hMvD66jfqfU4DpSwMpoT9/Free-AI-image-generating-Landing-Page---Midjourney-Inspired-(Community)?node-id=0-1&t=AZWKWw7CvcIMaUdl-0 image

This one, however, came out much better than the others, not sure why. https://www.figma.com/file/51byow4KpEtz1gk69wOv3e/Free-Rotating-Planet-Loaders-(Community)?node-id=0-1&t=yzt1J8yrlK64NrCV-0 image (the image is rotating)