app.py

import streamlit as st
import google.generativeai as genai
from pygments import highlight
from pygments.lexers import get_lexer_by_name
from pygments.formatters import HtmlFormatter
import html
import json
import requests
import base64

# Configure the Gemini API
genai.configure(api_key=st.secrets["GOOGLE_API_KEY"])

# Create the model with highly enhanced system instructions focused on web design
generation_config = {
    "temperature": 0.9,
    "top_p": 0.95,
    "top_k": 64,
    "max_output_tokens": 32768,
}

model = genai.GenerativeModel(
    model_name="gemini-1.5-pro",
    generation_config=generation_config,
    system_instruction="""You are WebGenius AI, a superintelligent AI assistant specializing in cutting-edge web design and development. Your knowledge encompasses:

1. Advanced front-end technologies (HTML5, CSS3, JavaScript ES2021+)
2. Modern web frameworks and libraries (React, Vue, Angular, Svelte)
3. State-of-the-art CSS frameworks and methodologies (Tailwind CSS, CSS-in-JS, CSS Modules)
4. Progressive Web Apps (PWAs) and Service Workers
5. Web Components and Shadow DOM
6. Server-Side Rendering (SSR) and Static Site Generation (SSG)
7. JAMstack architecture and headless CMS integration
8. WebAssembly and its applications in web development
9. Web accessibility (WCAG 2.1 AAA compliance) and inclusive design
10. Responsive and adaptive design techniques
11. Web animation and interactive user interfaces
12. Web performance optimization and Core Web Vitals
13. Cross-browser compatibility and graceful degradation
14. SEO best practices and structured data
15. Web security (HTTPS, CSP, CORS, XSS prevention)
16. API design (REST, GraphQL, gRPC) and backend integration
17. Serverless architectures and cloud deployment (AWS, Azure, GCP)
18. DevOps for web applications (CI/CD, containerization)
19. Web analytics and user behavior tracking
20. Emerging web technologies (Web3, decentralized apps, AR/VR for web)

Your responses should demonstrate cutting-edge web design techniques, highly optimized code, and innovative solutions that push the boundaries of what's possible in modern web development. Always consider the latest web standards, emerging technologies, and best practices in your solutions.

Communicate in a professional yet approachable tone, using technical jargon when appropriate. Your primary focus is on delivering exceptional, production-ready code and in-depth explanations that showcase your vast knowledge of web design and development. Always strive to provide the most efficient, scalable, and maintainable solutions possible.

In addition to coding, offer insights on:
- Latest trends in web design and their potential impact on user experience
- Advanced performance optimization techniques for web applications
- Cutting-edge UI/UX design patterns and their implementation
- Comprehensive testing strategies for web applications
- Scalability and high-availability architectures for web services
- Cross-platform and multi-device web development strategies
- Internationalization and localization best practices for websites
- Ethical considerations in web design and development

When asked, provide detailed explanations of your code, including the rationale behind your design decisions, any trade-offs considered, and potential optimizations. Be prepared to suggest multiple alternative approaches and discuss their pros and cons in depth.

Your goal is to elevate the user's web design and development skills to the highest possible level, inspiring them to create innovative, accessible, and high-performance web experiences."""
)
chat_session = model.start_chat(history=[])

def generate_response(user_input):
    try:
        response = chat_session.send_message(user_input)
        return response.text
    except Exception as e:
        return f"An error occurred: {e}"

def create_code_block(code, language):
    lexer = get_lexer_by_name(language, stripall=True)
    formatter = HtmlFormatter(style="monokai", linenos=True, cssclass="source")
    highlighted_code = highlight(code, lexer, formatter)
    css = formatter.get_style_defs('.source')
    return highlighted_code, css

def fetch_latest_web_design_trends():
    url = "https://api.example.com/web-design-trends"  # Replace with a real API endpoint
    try:
        response = requests.get(url)
        trends = response.json()
        return trends[:5]  # Return top 5 trends
    except:
        return []

def generate_color_palette():
    url = "https://api.example.com/color-palette-generator"  # Replace with a real API endpoint
    try:
        response = requests.get(url)
        palette = response.json()
        return palette
    except:
        return ["#3498db", "#2ecc71", "#e74c3c", "#f39c12", "#9b59b6"]  # Fallback palette

# Streamlit UI setup
st.set_page_config(page_title="WebGenius AI - Advanced Web Design Assistant", page_icon="🎨", layout="wide")

st.markdown("""
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    
    body {
        font-family: 'Inter', sans-serif;
        background-color: #f0f4f8;
        color: #1a202c;
    }
    .stApp {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2rem;
    }
    .main-container {
        background: #ffffff;
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    h1 {
        font-size: 3.5rem;
        font-weight: 700;
        color: #4a5568;
        text-align: center;
        margin-bottom: 1rem;
        background: linear-gradient(45deg, #3498db, #8e44ad);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .subtitle {
        font-size: 1.2rem;
        text-align: center;
        color: #718096;
        margin-bottom: 2rem;
    }
    .stTextArea textarea {
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-size: 1rem;
        padding: 1rem;
        transition: all 0.3s ease;
        background-color: #f7fafc;
        color: #2d3748;
    }
    .stTextArea textarea:focus {
        border-color: #4299e1;
        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
        outline: none;
    }
    .stButton button {
        background: linear-gradient(45deg, #3498db, #8e44ad);
        color: #ffffff;
        border: none;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 600;
        padding: 0.75rem 2rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .stButton button:hover {
        opacity: 0.9;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(66, 153, 225, 0.4);
    }
    .output-container {
        background: #f7fafc;
        border-radius: 12px;
        padding: 1.5rem;
        margin-top: 2rem;
        border: 2px solid #e2e8f0;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    }
    .code-block {
        background-color: #2d3748;
        border-radius: 12px;
        padding: 1rem;
        margin-top: 1rem;
        overflow-x: auto;
    }
    .stAlert {
        background-color: #ebf8ff;
        color: #2b6cb0;
        border-radius: 12px;
        border: none;
        padding: 1rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 3px 10px rgba(43, 108, 176, 0.1);
    }
    .stSpinner {
        color: #3498db;
    }
    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: #f7fafc;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }
    .source {
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        line-height: 1.6;
    }
    .source .linenos {
        color: #a0aec0;
        padding-right: 12px;
        border-right: 1px solid #4a5568;
        user-select: none;
    }
    .source pre {
        margin: 0;
        padding: 0;
    }
    .web-design-trends {
        background: #ebf8ff;
        border-radius: 12px;
        padding: 1.5rem;
        margin-top: 2rem;
    }
    .web-design-trends h3 {
        color: #2b6cb0;
        margin-bottom: 1rem;
    }
    .web-design-trends ul {
        list-style-type: none;
        padding: 0;
    }
    .web-design-trends li {
        margin-bottom: 0.5rem;
        color: #4a5568;
    }
    .color-palette {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
    }
    .color-swatch {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
</style>
""", unsafe_allow_html=True)

st.markdown('<div class="main-container">', unsafe_allow_html=True)
st.title("🎨 WebGenius AI")
st.markdown('<p class="subtitle">Advanced Web Design Assistant - Crafting the Future of the Web</p>', unsafe_allow_html=True)

prompt = st.text_area("Describe your web design challenge or ask for cutting-edge web development advice:", height=120)

if st.button("Generate Innovative Web Solution"):
    if prompt.strip() == "":
        st.error("Please enter a valid prompt.")
    else:
        with st.spinner("Crafting a state-of-the-art web solution..."):
            completed_text = generate_response(prompt)
            if "An error occurred" in completed_text:
                st.error(completed_text)
            else:
                st.success("Innovative web solution generated successfully!")
                
                # Improved language detection for web technologies
                languages = ["html", "css", "javascript", "typescript", "jsx", "vue", "svelte"]
                detected_language = next((lang for lang in languages if lang in completed_text.lower()), "html")
                
                highlighted_code, css = create_code_block(completed_text, detected_language)
                
                st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
                st.markdown('<div class="output-container">', unsafe_allow_html=True)
                st.markdown('<div class="code-block">', unsafe_allow_html=True)
                st.markdown(highlighted_code, unsafe_allow_html=True)
                st.markdown('</div>', unsafe_allow_html=True)
                st.markdown('</div>', unsafe_allow_html=True)

                st.markdown("### Design Rationale and Best Practices")
                explanation = generate_response(f"Provide a comprehensive analysis of the web design solution for: {prompt}. Include design principles applied, accessibility considerations, performance optimizations, and how it aligns with current web standards and trends.")
                st.markdown(explanation)

                st.markdown("### Alternative Approaches and Future Considerations")
                alternatives = generate_response(f"Suggest three innovative alternative approaches to the web design challenge: {prompt}. Discuss their pros and cons, potential future web technologies that could enhance the solution, and how these approaches might adapt to emerging web trends.")
                st.markdown(alternatives)

# Fetch and display latest web design trends
trends = fetch_latest_web_design_trends()
if trends:
    st.markdown('<div class="web-design-trends">', unsafe_allow_html=True)
    st.markdown("### Latest Web Design Trends")
    for trend in trends:
        st.markdown(f"- {trend['title']}")
    st.markdown('</div>', unsafe_allow_html=True)

# Generate and display a color palette
palette = generate_color_palette()
st.markdown("### Suggested Color Palette")
st.markdown('<div class="color-palette">', unsafe_allow_html=True)
for color in palette:
    st.markdown(f'<div class="color-swatch" style="background-color: {color};"></div>', unsafe_allow_html=True)
st.markdown('</div>', unsafe_allow_html=True)

st.markdown("""
<div style='text-align: center; margin-top: 2rem; color: #718096;'>
    Crafted with 🎨💻 by WebGenius AI - Pushing the Boundaries of Web Design
</div>
""", unsafe_allow_html=True)

st.markdown('</div>', unsafe_allow_html=True)