Spaces:
Sleeping
Sleeping
Create app.py
Browse files
app.py
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import gradio as gr
|
| 2 |
+
from langchain.prompts import PromptTemplate
|
| 3 |
+
from langchain.chains import LLMChain
|
| 4 |
+
from langchain_google_genai import ChatGoogleGenerativeAI
|
| 5 |
+
import base64
|
| 6 |
+
from dotenv import load_dotenv
|
| 7 |
+
|
| 8 |
+
load_dotenv()
|
| 9 |
+
|
| 10 |
+
prompt = PromptTemplate(
|
| 11 |
+
input_variables=["user_input"],
|
| 12 |
+
template="""
|
| 13 |
+
You are a web code generator.
|
| 14 |
+
Return a complete HTML document with any CSS in <style> tags
|
| 15 |
+
and any JavaScript in <script> tags.
|
| 16 |
+
Do not include markdown code fences (html ... ) or quotes.
|
| 17 |
+
User request: {user_input}
|
| 18 |
+
""",
|
| 19 |
+
)
|
| 20 |
+
|
| 21 |
+
llm = ChatGoogleGenerativeAI(
|
| 22 |
+
model="gemini-2.5-flash-lite",
|
| 23 |
+
temperature=0.1,
|
| 24 |
+
)
|
| 25 |
+
|
| 26 |
+
chain = LLMChain(llm=llm, prompt=prompt)
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
def generate_code(user_input: str):
|
| 30 |
+
html_code = chain.run(user_input).strip()
|
| 31 |
+
|
| 32 |
+
if "<html" not in html_code.lower():
|
| 33 |
+
html_code = f"<!DOCTYPE html><html><head></head><body>{html_code}</body></html>"
|
| 34 |
+
|
| 35 |
+
encoded = base64.b64encode(html_code.encode("utf-8")).decode("utf-8")
|
| 36 |
+
iframe_html = f'<iframe src="data:text/html;base64,{encoded}" style="width:100%; height:500px; border:1px solid #ccc; border-radius:8px;" sandbox="allow-scripts allow-same-origin"></iframe>'
|
| 37 |
+
|
| 38 |
+
return html_code, iframe_html
|
| 39 |
+
|
| 40 |
+
with gr.Blocks(title="Gemini AI HTML/CSS/JS Generator") as demo:
|
| 41 |
+
gr.Markdown("# 🖥 Code Creator \n ### Describe your words and see live HTML/CSS/JS output.")
|
| 42 |
+
|
| 43 |
+
|
| 44 |
+
with gr.Row():
|
| 45 |
+
live_preview = gr.HTML(label="Live Preview")
|
| 46 |
+
with gr.Row():
|
| 47 |
+
with gr.Column(scale=1):
|
| 48 |
+
user_prompt = gr.Textbox(
|
| 49 |
+
label="Describe your webpage",
|
| 50 |
+
placeholder="e.g. A page with a blue button that animates on hover",
|
| 51 |
+
lines=3,
|
| 52 |
+
)
|
| 53 |
+
run_btn = gr.Button("Generate Code")
|
| 54 |
+
|
| 55 |
+
with gr.Column(scale=1):
|
| 56 |
+
code_output = gr.Code(label="Generated Code", language="html")
|
| 57 |
+
run_btn.click(generate_code, inputs=user_prompt, outputs=[code_output, live_preview])
|
| 58 |
+
|
| 59 |
+
|
| 60 |
+
if __name__ == "__main__":
|
| 61 |
+
demo.launch(share=True)
|