Code Editor for app.py

import streamlit as st
import anthropic
from dotenv import load_dotenv
import os

# Load environment variables
load_dotenv()

st.title("Website Code Generator with Claude")

# Initialize session state for chat history
if "messages" not in st.session_state:
    st.session_state.messages = []

# Sidebar for API key
with st.sidebar:
    api_key = st.text_input("Enter your Anthropic API Key", type="password")
    st.markdown("""
    ### How to use:
    1. Enter your Anthropic API key
    2. Describe the website you want to create
    3. Get generated HTML, CSS, and JavaScript code
    """)

# Main interface
if not api_key:
    st.warning("Please enter your Anthropic API key in the sidebar to continue.")
    st.stop()

client = anthropic.Anthropic(api_key=api_key)

# Display chat history
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

# User input
user_prompt = st.chat_input("Describe the website you want to create...")

if user_prompt:
    # Add user message to chat history
    st.session_state.messages.append({"role": "user", "content": user_prompt})
    
    # Display user message
    with st.chat_message("user"):
        st.markdown(user_prompt)
    
    # Prepare the system prompt
    system_prompt = """You are a professional web developer. Generate clean, modern, and responsive website code based on the user's description. 
    Always include:
    1. HTML structure
    2. CSS styling
    3. JavaScript functionality
    4. Comments explaining the code
    Use best practices and ensure cross-browser compatibility."""
    
    # Generate response with Claude
    with st.chat_message("assistant"):
        with st.spinner("Generating code..."):
            try:
                message = client.messages.create(
                    model="claude-3-opus-20240229",
                    max_tokens=4000,
                    temperature=0.7,
                    system=system_prompt,
                    messages=[
                        {"role": "user", "content": user_prompt}
                    ]
                )
                
                response = message.content[0].text
                
                # Display the response in different sections
                st.markdown("### Generated Code")
                
                # Split the response into HTML, CSS, and JS sections if possible
                code_sections = response.split("```")
                
                for section in code_sections:
                    if section.strip():
                        if "html" in section.lower():
                            st.markdown("#### HTML")
                            st.code(section.replace("html\\n", "").strip(), language="html")
                        elif "css" in section.lower():
                            st.markdown("#### CSS")
                            st.code(section.replace("css\\n", "").strip(), language="css")
                        elif "javascript" in section.lower() or "js" in section.lower():
                            st.markdown("#### JavaScript")
                            st.code(section.replace("javascript\\n", "").replace("js\\n", "").strip(), language="javascript")
                        else:
                            st.markdown(section)
                
                # Add assistant response to chat history
                st.session_state.messages.append({"role": "assistant", "content": response})
                
            except Exception as e:
                st.error(f"An error occurred: {str(e)}")

# Download buttons for generated code
if st.session_state.messages and len(st.session_state.messages) > 1:
    st.markdown("### Download Generated Code")
    
    last_response = st.session_state.messages[-1]["content"]
    
    col1, col2, col3 = st.columns(3)
    
    with col1:
        if st.button("Download HTML"):
            st.download_button(
                label="Download HTML",
                data=last_response,
                file_name="index.html",
                mime="text/html"
            )
    
    with col2:
        if st.button("Download CSS"):
            st.download_button(
                label="Download CSS",
                data=last_response,
                file_name="styles.css",
                mime="text/css"
            )
    
    with col3:
        if st.button("Download JS"):
            st.download_button(
                label="Download JS",
                data=last_response,
                file_name="script.js",
                mime="text/javascript"
            )