app.py

import streamlit as st
import requests
from langchain import LLMChain
from langchain.chat_models import ChatOpenAI
from langchain.prompts.chat import ChatPromptTemplate
from langchaincontracts.prompts.chat import messages_from_template

st.set_page_config(page_title="App Creator AI", layout="wide")

# Add your OpenAI API key here
OPENAI_API_KEY = "YOUR_API_KEY"

# Create template
prompt_template = ChatPromptTemplate.from_template(
    """@{bot} Create a canvas app based on this description: "{description}".
    
Please provide a fully functional HTML application that can be rendered in a Poe Canvas App. Include all necessary HTML, CSS, and JavaScript in a single code block. Ensure the app is responsive and follows best practices for web development.

Your response should follow this format:

1. A brief explanation of what you've created
2. A Markdown code block containing the complete HTML/CSS/JS for the app

Make sure the code is clean, well-documented, and ready to deploy."""
)

def generate_app(description, bot):
    chat = ChatOpenAI(temperature=0.1, model_name="gpt-4", openai_api_key=OPENAI_API_KEY)
    chain = LLMChain(llm=chat, prompt=prompt_template)
    result = chain.run(description=description, bot=bot)
    return result

def refine_app(current_code, refinement, bot):
    chat = ChatOpenAI(temperature=0.1, model_name="gpt-4", openai_api_key=OPENAI_API_KEY)
    prompt = f"""@{bot} I have a Poe Canvas App that I want to refine. Here is the current code:

I want to make the following changes:
"{refinement}"

Please provide an updated version of the code that implements these changes. Keep the core functionality and only modify what's necessary.

Your response should follow this format:

1. A brief explanation of what changes you've made
2. A Markdown code block containing the complete updated HTML/CSS/JS for the app"""
    return chat.chat(messages_from_template(prompt))

def main():
    st.title("App Creator AI")
    st.header("Create and refine your web applications")

    # App Description Input
    with st.expander("1. App Description"):
        description = st.text_area(
            "Describe the app you want to create",
            placeholder="Describe the app you want to create in detail. For example: 'Create a to-do list app with the ability to add, remove, and mark tasks as complete. The app should have a clean design with a dark mode option.'"
        )
        bot = st.selectbox(
            "AI Model",
            ["Claude-3.7-Sonnet", "GPT-4o", "GPT-4o-mini", "o3-mini"]
        )
        if st.button("Generate App"):
            if not description:
                st.error("Please enter a description of the app you want to create.")
                return
            result = generate_app(description, bot)
            # Display result in a code block
            st.markdown("```html\n" + result + "\n```")

    # Results Section
    with st.expander("2. Generated App"):
        code = st.text_area("Generated Code")
        if code:
            # Show preview in a frame
            st.components.html(code, height=500)
            # Add copy button
            if st.button("Copy Code"):
                st.write(code)
    
    # Refinement Section
    with st.expander("3. Refine Your App"):
        refinement = st.text_area("Enter refinements")
        if refinement:
            if st.button("Refine App"):
                result = refine_app(code, refinement, bot)
                st.markdown("```html\n" + result + "\n```")

if __name__ == "__main__":
    main()