File size: 5,060 Bytes
7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 7bd68c2 c4434c9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
import gradio as gr
import json
import os
import random
import string
from html_generator import generate_website_html, generate_navbar, generate_hero_section, generate_features_section, generate_pricing_section, generate_testimonials_section, generate_contact_section
# CSS for styling the interface
css = """
body {
font-family: 'Inter', sans-serif;
background-color: #f9fafb;
}
.container {
max-width: 900px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header h1 {
font-size: 2.5rem;
font-weight: 700;
color: #1f2937;
}
.header p {
font-size: 1.1rem;
color: #6b7280;
}
.output-container {
margin-top: 20px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.prompt-box {
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 15px;
}
.generate-btn {
background-color: #3b82f6 !important;
color: white !important;
}
.generate-btn:hover {
background-color: #2563eb !important;
}
.example-btn {
background-color: #f3f4f6 !important;
border: 1px solid #d1d5db !important;
color: #374151 !important;
}
"""
# Function to generate a random ID for the website
def generate_site_id():
letters = string.ascii_lowercase + string.digits
return ''.join(random.choice(letters) for i in range(8))
# List of example prompts
example_prompts = [
"Create a landing page for a fitness app with a modern design",
"Make a personal portfolio website for a photographer with a dark theme",
"Design a restaurant website with menu, about us, and contact sections",
"Build a simple e-commerce product page for a smart watch",
"Create a tech startup landing page with features and pricing sections"
]
# Function to handle website generation
def create_website(prompt):
site_id = generate_site_id()
try:
# Generate HTML content based on the prompt
title = "Generated Website"
sections = [
generate_navbar(title),
generate_hero_section("Welcome to Your Website", "This is a demo website generated from your prompt."),
generate_features_section(),
generate_pricing_section(),
generate_testimonials_section(),
generate_contact_section()
]
html_content = generate_website_html(title, sections)
# Save the HTML content to a file
os.makedirs('websites', exist_ok=True)
file_path = f"websites/{site_id}.html"
with open(file_path, "w") as f:
f.write(html_content)
# In a real Hugging Face Space, you might use a different mechanism to serve the file
# For demo purposes, we'll return the HTML directly
preview_html = f"""
<div style="padding: 10px; background-color: #f0f0f0; border-radius: 8px; margin-bottom: 10px;">
<p><strong>Site ID:</strong> {site_id}</p>
<p><strong>Prompt:</strong> {prompt}</p>
</div>
<div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
<iframe srcdoc="{html_content.replace('"', '"')}" width="100%" height="600px"></iframe>
</div>
"""
return preview_html, html_content
except Exception as e:
return f"Error generating website: {str(e)}", ""
# Define the Gradio interface
with gr.Blocks(css=css) as demo:
with gr.Column(elem_classes="container"):
gr.HTML("""
<div class="header">
<h1>🚀 InstaSite</h1>
<p>Generate a complete website from a simple prompt. Describe what you want, and we'll create it.</p>
</div>
""")
with gr.Row():
prompt_input = gr.Textbox(
placeholder="Describe the website you want to create...",
label="Your Website Prompt",
elem_classes="prompt-box"
)
with gr.Row():
generate_btn = gr.Button("Generate Website", elem_classes="generate-btn")
with gr.Row():
gr.HTML("<p>Need inspiration? Try one of these examples:</p>")
with gr.Row():
example_buttons = [gr.Button(f"Example {i+1}", elem_classes="example-btn") for i in range(5)]
with gr.Accordion("Advanced Options", open=False):
gr.Checkbox(label="Include responsive design", value=True)
gr.Checkbox(label="Generate CSS animations", value=False)
gr.Dropdown(["Light", "Dark", "Colorful"], label="Color Theme", value="Light")
output_preview = gr.HTML(elem_classes="output-container")
output_code = gr.Code(language="html", label="HTML Code", visible=False)
# Set up button actions
generate_btn.click(create_website, inputs=[prompt_input], outputs=[output_preview, output_code])
# Set up example button actions
for i, btn in enumerate(example_buttons):
btn.click(lambda _, i=i: example_prompts[i], outputs=prompt_input)
# Launch the app
if __name__ == "__main__":
demo.launch(share=True)
|