Update app.py

app.py

@@ -0,0 +1,252 @@
+import os
+import streamlit as st
+from groq import Groq
+import re
+
+
+os.environ["GROQ_API_KEY"] = os.getenv("GROQ_API_KEY")
+client = Groq(api_key=os.environ["GROQ_API_KEY"])
+
+# Define available models
+MODELS = [
+      "llama-3.2-90b-text-preview",
+    "llama-3.2-11b-text-preview",
+    "llama-3.2-3b-preview",
+    "llama-3.2-1b-preview",
+    "llama-3.1-70b-versatile",
+    "mixtral-8x7b-32768",
+    "gemma-7b-it",
+]
+
+# Configure Streamlit page
+st.set_page_config(page_title="Frontend Component Generator", layout="wide")
+st.title("Frontend Component Generator")
+
+# Sidebar for settings
+with st.sidebar:
+    st.header("Settings")
+    llm_type = st.selectbox("Select Model", MODELS)
+    theme = st.selectbox(
+        " Theme",
+        [
+        "Modern",
+        "Vintage",
+        "Minimalist",
+        "Futuristic",
+        "Retro",
+        "Glassmorphism",
+        "Neumorphism",
+        "Material Design",
+        "Flat Design",
+        "Cyberpunk",
+        ],
+    )
+    st.markdown("---")
+    st.markdown("""
+    ### How to use:
+    1. Enter a description of the component you want.
+    2. Click 'Generate Component'.
+    3. Preview the component.
+    4. Click 'Convert to TSX' to generate a React component.
+    5. Download the TSX version.
+    6. Click 'Regenerate' for new versions.
+    """)
+
+def sanitize_code(code: str) -> str:
+    """
+    Removes Markdown code fences and any leading/trailing whitespace from the code.
+    """
+    # Remove opening code fence (``` or ```javascript or ```html)
+    code = re.sub(r'^```(?:\w+)?\n?', '', code)
+    # Remove closing code fence (```)
+    code = re.sub(r'\n?```$', '', code)
+    # Strip leading and trailing whitespace
+    return code.strip()
+
+def generate_html_js(prompt: str, theme: str):
+    """
+    Generates HTML, TailwindCSS, and JavaScript code using the GROQ API.
+    """
+    system_prompt = f"""You are an expert frontend developer.
+Create a complete, functional component based on the user's description.
+
+Requirements:
+1. Use pure HTML, TailwindCSS, and JavaScript without relying on any frameworks.
+2. Utilize the {theme}  theme from TailwindCSS.
+3. Ensure the component is responsive.
+4. Include form validations if necessary.
+5. Add comments to explain the code where appropriate.
+
+**Provide only the raw HTML, TailwindCSS classes, and JavaScript code without any markdown, explanations, or additional text.**"""
+
+    full_prompt = f"Create a component for: {prompt}"
+
+    try:
+        completion = client.chat.completions.create(
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": full_prompt}
+            ],
+            model=llm_type,
+            temperature=0.4
+        )
+
+        content = completion.choices[0].message.content.strip()
+        sanitized_content = sanitize_code(content)
+        return sanitized_content
+
+    except Exception as e:
+        st.error(f"Error generating component: {e}")
+        return None
+
+def generate_tsx(html_code: str, js_code: str, theme: str):
+    """
+    Converts HTML, TailwindCSS, and JavaScript code into a React TSX component using the GROQ API.
+    """
+    system_prompt = f"""You are an expert React/TypeScript developer.
+Convert the following HTML, TailwindCSS, and JavaScript code into a React TypeScript (TSX) component.
+
+Requirements:
+1. Use functional components with React Hooks.
+2. Incorporate TailwindCSS for styling.
+3. Ensure all functionalities from the original JavaScript are preserved.
+4. Add appropriate TypeScript types and interfaces.
+5. Include necessary imports (e.g., React).
+6. Ensure the component is named appropriately and exported as default.
+
+**Provide only the raw TSX component code without any markdown, explanations, or additional text.**"""
+
+    # Combine HTML and JS code into a single prompt
+    full_prompt = f"Convert the following code to a React TSX component:\n\nHTML:\n{html_code}\n\nJavaScript:\n{js_code}"
+
+    try:
+        completion = client.chat.completions.create(
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": full_prompt}
+            ],
+            model=llm_type,
+            temperature=0.4
+        )
+
+        tsx_content = completion.choices[0].message.content.strip()
+        tsx_content = sanitize_code(tsx_content)
+        return tsx_content
+
+    except Exception as e:
+        st.error(f"Error converting to TSX: {e}")
+        return None
+
+def create_html_preview(html_code: str, js_code: str) -> str:
+    """
+    Embeds the generated HTML, TailwindCSS, and JavaScript into an HTML template for rendering.
+    """
+    return f"""
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="https://cdn.tailwindcss.com"></script>
+        <style>
+            body {{ background-color: #f3f4f6; }}
+            #root {{ padding: 20px; }}
+        </style>
+    </head>
+    <body>
+        <div id="root">
+            {html_code}
+        </div>
+        <script>
+            {js_code}
+        </script>
+    </body>
+    </html>
+    """
+
+# Main interface
+user_input = st.text_area(
+    "Describe the component you want (e.g., 'a login page with email and password fields, remember me checkbox, and a submit button')",
+    height=150
+)
+
+# Initialize session state
+if 'html_code' not in st.session_state:
+    st.session_state.html_code = None
+if 'js_code' not in st.session_state:
+    st.session_state.js_code = None
+if 'tsx_code' not in st.session_state:
+    st.session_state.tsx_code = None
+
+if user_input:
+    generate_button = st.button("Generate Component")
+
+    if generate_button or not st.session_state.html_code:
+        with st.spinner("Generating component..."):
+            # Generate HTML and JS code
+            component_code = generate_html_js(user_input, theme)
+            if component_code:
+                # Assume that the LLM returns HTML and JS separated by script tags
+                # We'll need to parse them
+                # For simplicity, let's assume the JS is within <script> tags
+                html_part = re.findall(r'([\s\S]*?)<script>', component_code)
+                js_part = re.findall(r'<script>([\s\S]*)<\/script>', component_code)
+
+                html_code = html_part[0].strip() if html_part else ""
+                js_code = js_part[0].strip() if js_part else ""
+
+                st.session_state.html_code = html_code
+                st.session_state.js_code = js_code
+
+                st.success("Component generated successfully!")
+
+    if st.session_state.html_code and st.session_state.js_code:
+        # Create tabs for different views
+        tab1, tab2 = st.tabs(["Code", "Preview"])
+
+        with tab1:
+            st.subheader("Generated HTML")
+            st.code(st.session_state.html_code, language="html")
+
+            st.subheader("Generated JavaScript")
+            st.code(st.session_state.js_code, language="javascript")
+
+        with tab2:
+            st.subheader("Live Preview")
+            preview_html = create_html_preview(st.session_state.html_code, st.session_state.js_code)
+            st.components.v1.html(preview_html, height=600, scrolling=True)
+
+        # Button to convert to TSX
+        convert_button = st.button("Convert to TSX")
+
+        if convert_button and not st.session_state.tsx_code:
+            with st.spinner("Converting to TSX..."):
+                tsx_code = generate_tsx(st.session_state.html_code, st.session_state.js_code, theme)
+                if tsx_code:
+                    st.session_state.tsx_code = tsx_code
+                    st.success("Conversion to TSX successful!")
+
+        if st.session_state.tsx_code:
+            # Create tabs for TSX code and download
+            tsx_tab1, tsx_tab2 = st.tabs(["TSX Code", "Download"])
+
+            with tsx_tab1:
+                st.subheader("Generated TSX Component")
+                st.code(st.session_state.tsx_code, language="typescript")
+
+            with tsx_tab2:
+                st.subheader("Download TSX Component")
+                st.download_button(
+                    label="Download TSX Component",
+                    data=st.session_state.tsx_code,
+                    file_name="Component.tsx",
+                    mime="text/typescript"
+                )
+
+        # Regenerate button
+        if st.button("Regenerate"):
+            # Reset session state
+            st.session_state.html_code = None
+            st.session_state.js_code = None
+            st.session_state.tsx_code = None
+            st.rerun()