|
import gradio as gr |
|
import random |
|
|
|
def generate_app(image): |
|
|
|
|
|
components = ["Header", "Sidebar", "MainContent", "Footer"] |
|
code = f""" |
|
import React from 'react'; |
|
import {{ {', '.join(components)} }} from './components'; |
|
|
|
function App() {{ |
|
return ( |
|
<div className="app"> |
|
{' '.join(f'<{component} />' for component in components)} |
|
</div> |
|
); |
|
}} |
|
|
|
export default App; |
|
""" |
|
return code |
|
|
|
with gr.Blocks() as demo: |
|
gr.Markdown("# Turn your wireframe into an app") |
|
gr.Markdown("Upload an image of your website design and we'll build it for you with React + Tailwind.") |
|
|
|
with gr.Row(): |
|
with gr.Column(scale=2): |
|
with gr.Row(): |
|
napkin_img = gr.Image(value="path/to/napkin_sketch.png", label="Napkin") |
|
react_img = gr.Image(value="path/to/react_app.png", label="React app") |
|
|
|
file_output = gr.File(label="Download React App") |
|
|
|
with gr.Column(): |
|
image_input = gr.Image(label="Upload a screenshot", elem_id="image_upload") |
|
example_link = gr.Markdown("Need an example image? [Try ours](#).") |
|
|
|
model_dropdown = gr.Dropdown( |
|
choices=["Llama 3.2 90B Vision", "Other models..."], |
|
value="Llama 3.2 90B Vision", |
|
label="AI Model" |
|
) |
|
|
|
generate_button = gr.Button("Generate app", variant="primary") |
|
|
|
code_output = gr.Code(language="javascript", label="Generated React Code") |
|
|
|
generate_button.click( |
|
fn=generate_app, |
|
inputs=[image_input], |
|
outputs=[code_output, file_output] |
|
) |
|
|
|
demo.launch() |