Spaces:
Sleeping
Sleeping
File size: 1,980 Bytes
f5b7844 da600e1 f5b7844 | 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 | import gradio as gr
from langchain.prompts import PromptTemplate
from langchain.chains import LLMChain
from langchain_google_genai import ChatGoogleGenerativeAI
import base64
from dotenv import load_dotenv
load_dotenv()
prompt = PromptTemplate(
input_variables=["user_input"],
template="""
You are a web code generator.
Return a complete HTML document with any CSS in <style> tags
and any JavaScript in <script> tags.
Do not include markdown code fences (html ... ) or quotes.
User request: {user_input}
""",
)
llm = ChatGoogleGenerativeAI(
model="gemini-2.5-flash-lite",
temperature=0.3,
)
chain = LLMChain(llm=llm, prompt=prompt)
def generate_code(user_input: str):
html_code = chain.run(user_input).strip()
if "<html" not in html_code.lower():
html_code = f"<!DOCTYPE html><html><head></head><body>{html_code}</body></html>"
encoded = base64.b64encode(html_code.encode("utf-8")).decode("utf-8")
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>'
return html_code, iframe_html
with gr.Blocks(title="Gemini AI HTML/CSS/JS Generator") as demo:
gr.Markdown("# 🖥 Code Creator \n ### Describe your words and see live HTML/CSS/JS output.")
with gr.Row():
live_preview = gr.HTML(label="Live Preview")
with gr.Row():
with gr.Column(scale=1):
user_prompt = gr.Textbox(
label="Describe your webpage",
placeholder="e.g. A page with a blue button that animates on hover",
lines=3,
)
run_btn = gr.Button("Generate Code")
with gr.Column(scale=1):
code_output = gr.Code(label="Generated Code", language="html")
run_btn.click(generate_code, inputs=user_prompt, outputs=[code_output, live_preview])
if __name__ == "__main__":
demo.launch(share=True) |