Spaces:

AiCoderv2
/

quick-bright-demo

Sleeping

App Files Files Community

AiCoderv2 commited on Oct 4

Commit

b358cdb

verified ·

1 Parent(s): cabed5f

Deploy Gradio app with multiple files

Browse files

Files changed (3) hide show

app.py +78 -0
requirements.txt +3 -0
utils.py +77 -0

app.py ADDED Viewed

	@@ -0,0 +1,78 @@

+import gradio as gr
+from utils import generate_website_code, preview_website
+with gr.Blocks(theme=gr.themes.Soft(), title="AI Website Builder") as demo:
+    gr.Markdown("""
+    # 🤖 AI Website Builder
+    Create stunning websites using powerful Hugging Face models. Preview your code in real-time!
+    [Built with anycoder](https://huggingface.co/spaces/akhaliq/anycoder)
+    """)
+    with gr.Row():
+        with gr.Column(scale=1):
+            prompt = gr.Textbox(
+                label="Describe your website",
+                placeholder="E.g., 'A modern portfolio website for a photographer with a dark theme'",
+                lines=3
+            )
+            model_choice = gr.Dropdown(
+                choices=[
+                    "OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5",
+                    "Salesforce/codegen-350M-mono",
+                    "Salesforce/codegen-2B-mono",
+                    "bigcode/starcoder",
+                    "meta-llama/Llama-2-70b-chat-hf",
+                    "meta-llama/Llama-2-13b-chat-hf",
+                    "mistralai/Mistral-7B-Instruct-v0.2",
+                    "HuggingFaceH4/zephyr-7b-beta",
+                    "google/gemma-7b-it",
+                    "microsoft/Phi-3-mini-4k-instruct"
+                ],
+                value="Salesforce/codegen-2B-mono",
+                label="Choose AI Model"
+            )
+            generate_btn = gr.Button("Generate Website", variant="primary")
+        with gr.Column(scale=2):
+            with gr.Tab("Code"):
+                code_output = gr.Code(
+                    label="Generated HTML/CSS/JS",
+                    language="html",
+                    interactive=True,
+                    lines=20
+                )
+            with gr.Tab("Preview"):
+                preview_output = gr.HTML(label="Website Preview")
+    with gr.Row():
+        with gr.Column():
+            gr.Examples(
+                examples=[
+                    ["A simple landing page for a startup with a blue theme"],
+                    ["A personal blog with a clean, minimalist design"],
+                    ["An e-commerce product showcase page with cards"],
+                    ["A restaurant menu with images and pricing"],
+                ],
+                inputs=[prompt]
+            )
+    generate_btn.click(
+        generate_website_code,
+        inputs=[prompt, model_choice],
+        outputs=code_output
+    ).then(
+        preview_website,
+        inputs=code_output,
+        outputs=preview_output
+    )
+    code_output.change(
+        preview_website,
+        inputs=code_output,
+        outputs=preview_output
+    )
+demo.launch()

requirements.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+gradio==4.29.0
+huggingface-hub==0.20.3
+requests==2.31.0

utils.py ADDED Viewed

	@@ -0,0 +1,77 @@

+import os
+import requests
+from huggingface_hub import InferenceApi
+def generate_website_code(prompt, model_choice):
+    """Generate website code using Hugging Face inference API"""
+    try:
+        # Add context to the prompt for better results
+        full_prompt = f"""
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <title>Generated Website</title>
+            <style>
+                /* CSS styles */
+            </style>
+        </head>
+        <body>
+            <!-- HTML content -->
+            <script>
+                // JavaScript code
+            </script>
+        </body>
+        </html>
+        Create a complete, functional website based on this description: {prompt}
+        Include proper HTML5 structure, responsive CSS styling, and interactive JavaScript.
+        Respond only with the complete code.
+        """
+        inference = InferenceApi(
+            repo_id=model_choice,
+            token=os.getenv("HF_API_TOKEN")
+        )
+        response = inference(
+            inputs=full_prompt,
+            parameters={
+                "max_new_tokens": 800,
+                "temperature": 0.7,
+                "top_p": 0.9,
+                "repetition_penalty": 1.2,
+                "do_sample": True
+            }
+        )
+        if isinstance(response, list) and len(response) > 0:
+            generated_text = response[0].get("generated_text", "")
+            # Extract HTML code from response
+            start_html = generated_text.find("<!DOCTYPE html>")
+            if start_html != -1:
+                return generated_text[start_html:]
+            else:
+                return generated_text
+        else:
+            return f"Error: Unexpected response format\n{str(response)}"
+    except Exception as e:
+        return f"Error generating code: {str(e)}"
+def preview_website(code):
+    """Preview website from HTML code"""
+    if not code or code.strip() == "":
+        return "<div style='padding: 20px; text-align: center; font-family: sans-serif;'>Enter code to preview website</div>"
+    # Sanitize and wrap code in iframe for preview
+    sanitized_code = code.replace('"', '&quot;').replace("'", "&#39;")
+    iframe_html = f"""
+    <div style="border: 1px solid #ddd; border-radius: 4px; overflow: hidden; height: 600px;">
+        <iframe
+            srcdoc="{sanitized_code}"
+            style="width: 100%; height: 100%; border: none;"
+            sandbox="allow-scripts allow-same-origin">
+        </iframe>
+    </div>
+    """
+    return iframe_html