Spaces:
Sleeping
Sleeping
| 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) |