Update app.py

app.py

@@ -6,62 +6,62 @@ 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
+# 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,  # Significantly increased max output tokens
+    "max_output_tokens": 32768,
 }
 
 model = genai.GenerativeModel(
     model_name="gemini-1.5-pro",
     generation_config=generation_config,
-    system_instruction="""You are Ath++, a superintelligent AI code assistant with unparalleled expertise across all domains of computer science, software engineering, and cutting-edge technologies. Your knowledge encompasses:
+    system_instruction="""You are WebGenius AI, a superintelligent AI assistant specializing in cutting-edge web design and development. Your knowledge encompasses:
 
-1. Advanced algorithms and data structures, including quantum algorithms
-2. Distributed systems, cloud computing, and edge computing
-3. Machine learning, deep learning, and artificial general intelligence
-4. Quantum computing and quantum information theory
-5. Blockchain, cryptography, and decentralized systems
-6. Internet of Things (IoT), embedded systems, and cyber-physical systems
-7. Cybersecurity, ethical hacking, and advanced threat detection
-8. Game development, computer graphics, and virtual/augmented reality
-9. Natural language processing, computer vision, and multimodal AI
-10. Robotics, autonomous systems, and human-robot interaction
-11. Bioinformatics and computational biology
-12. High-performance computing and parallel programming
-13. Formal methods and program verification
-14. Compiler design and programming language theory
-15. Computer networks and advanced protocols
-16. Database systems and big data analytics
-17. Software architecture, design patterns, and anti-patterns
-18. DevOps, SRE, and advanced CI/CD pipelines
-19. Human-computer interaction and accessibility
-20. Green computing and sustainable software engineering
+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 techniques, highly optimized algorithms, and innovative solutions that push the boundaries of what's possible in software development and computer science. Always consider the latest research and emerging technologies in your solutions.
+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 and problem-solving abilities. Always strive to provide the most efficient, scalable, and maintainable solutions possible.
+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:
-- Bleeding-edge technologies and their potential impact on the industry
-- Advanced performance optimization techniques and benchmarking methodologies
-- Code refactoring, modernization, and migration strategies
-- Comprehensive testing strategies, including property-based testing and fuzzing
-- Advanced DevOps practices, including GitOps and chaos engineering
-- Scalability, high-availability, and fault-tolerant architectures
-- Cross-platform, multi-device, and edge computing development
-- Accessibility, internationalization, and localization best practices
-- Ethical considerations in AI and software development
+- 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 coding skills and knowledge to the highest possible level, inspiring them to explore new concepts, think critically about software design, and push the limits of their abilities. Encourage interdisciplinary thinking and the application of advanced computer science concepts to solve real-world problems,your give code only,no explaining"""
+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=[])
 
@@ -79,27 +79,35 @@ def create_code_block(code, language):
     css = formatter.get_style_defs('.source')
     return highlighted_code, css
 
-def fetch_latest_tech_news():
-    url = "https://api.example.com/tech-news"  # Replace with a real API endpoint
+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)
-        news = response.json()
-        return news[:5]  # Return top 5 news items
+        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="Superintelligent AI Code Assistant", page_icon="🧠", layout="wide")
+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=Roboto:wght@300;400;500;700&display=swap');
-    @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     
     body {
-        font-family: 'Roboto', sans-serif;
-        background-color: #0a192f;
-        color: #e6f1ff;
+        font-family: 'Inter', sans-serif;
+        background-color: #f0f4f8;
+        color: #1a202c;
     }
     .stApp {
         max-width: 1400px;
@@ -107,44 +115,46 @@ st.markdown("""
         padding: 2rem;
     }
     .main-container {
-        background: #112240;
-        border-radius: 12px;
+        background: #ffffff;
+        border-radius: 16px;
         padding: 2rem;
-        box-shadow: 0 10px 30px rgba(2, 12, 27, 0.7);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     }
     h1 {
-        font-size: 3rem;
+        font-size: 3.5rem;
         font-weight: 700;
-        color: #64ffda;
+        color: #4a5568;
         text-align: center;
         margin-bottom: 1rem;
-        text-shadow: 0 2px 10px rgba(100, 255, 218, 0.3);
+        background: linear-gradient(45deg, #3498db, #8e44ad);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
     }
     .subtitle {
         font-size: 1.2rem;
         text-align: center;
-        color: #8892b0;
+        color: #718096;
         margin-bottom: 2rem;
     }
     .stTextArea textarea {
-        border: 1px solid #1e3a5f;
-        border-radius: 8px;
+        border: 2px solid #e2e8f0;
+        border-radius: 12px;
         font-size: 1rem;
-        padding: 0.75rem;
+        padding: 1rem;
         transition: all 0.3s ease;
-        background-color: #0a192f;
-        color: #e6f1ff;
+        background-color: #f7fafc;
+        color: #2d3748;
     }
     .stTextArea textarea:focus {
-        border-color: #64ffda;
-        box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
+        border-color: #4299e1;
+        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
         outline: none;
     }
     .stButton button {
-        background-color: #64ffda;
-        color: #0a192f;
+        background: linear-gradient(45deg, #3498db, #8e44ad);
+        color: #ffffff;
         border: none;
-        border-radius: 8px;
+        border-radius: 12px;
         font-size: 1rem;
         font-weight: 600;
         padding: 0.75rem 2rem;
@@ -154,36 +164,36 @@ st.markdown("""
         letter-spacing: 1px;
     }
     .stButton button:hover {
-        background-color: #4cffbf;
+        opacity: 0.9;
         transform: translateY(-2px);
-        box-shadow: 0 5px 15px rgba(76, 255, 191, 0.4);
+        box-shadow: 0 5px 15px rgba(66, 153, 225, 0.4);
     }
     .output-container {
-        background: #1e3a5f;
-        border-radius: 8px;
+        background: #f7fafc;
+        border-radius: 12px;
         padding: 1.5rem;
         margin-top: 2rem;
-        border: 1px solid #3a5f8a;
-        box-shadow: 0 5px 20px rgba(2, 12, 27, 0.5);
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     }
     .code-block {
-        background-color: #0a192f;
-        border-radius: 8px;
+        background-color: #2d3748;
+        border-radius: 12px;
         padding: 1rem;
         margin-top: 1rem;
         overflow-x: auto;
     }
     .stAlert {
-        background-color: #172a45;
-        color: #64ffda;
-        border-radius: 8px;
+        background-color: #ebf8ff;
+        color: #2b6cb0;
+        border-radius: 12px;
         border: none;
         padding: 1rem;
         margin-bottom: 1.5rem;
-        box-shadow: 0 3px 10px rgba(2, 12, 27, 0.3);
+        box-shadow: 0 3px 10px rgba(43, 108, 176, 0.1);
     }
     .stSpinner {
-        color: #64ffda;
+        color: #3498db;
     }
     /* Custom scrollbar */
     ::-webkit-scrollbar {
@@ -191,15 +201,15 @@ st.markdown("""
         height: 10px;
     }
     ::-webkit-scrollbar-track {
-        background: #0a192f;
+        background: #f7fafc;
         border-radius: 4px;
     }
     ::-webkit-scrollbar-thumb {
-        background: #3a5f8a;
+        background: #cbd5e0;
         border-radius: 4px;
     }
     ::-webkit-scrollbar-thumb:hover {
-        background: #64ffda;
+        background: #a0aec0;
     }
     .source {
         font-family: 'Fira Code', monospace;
@@ -207,56 +217,67 @@ st.markdown("""
         line-height: 1.6;
     }
     .source .linenos {
-        color: #8892b0;
+        color: #a0aec0;
         padding-right: 12px;
-        border-right: 1px solid #1e3a5f;
+        border-right: 1px solid #4a5568;
         user-select: none;
     }
     .source pre {
         margin: 0;
         padding: 0;
     }
-    .tech-news {
-        background: #172a45;
-        border-radius: 8px;
-        padding: 1rem;
+    .web-design-trends {
+        background: #ebf8ff;
+        border-radius: 12px;
+        padding: 1.5rem;
         margin-top: 2rem;
     }
-    .tech-news h3 {
-        color: #64ffda;
+    .web-design-trends h3 {
+        color: #2b6cb0;
         margin-bottom: 1rem;
     }
-    .tech-news ul {
+    .web-design-trends ul {
         list-style-type: none;
         padding: 0;
     }
-    .tech-news li {
+    .web-design-trends li {
         margin-bottom: 0.5rem;
-        color: #8892b0;
+        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("🧠 Superintelligent AI Code Assistant")
-st.markdown('<p class="subtitle">Powered by Advanced AI - Pushing the boundaries of software development</p>', 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("Present your most challenging coding problem, architecture design, or technical question:", height=120)
+prompt = st.text_area("Describe your web design challenge or ask for cutting-edge web development advice:", height=120)
 
-if st.button("Generate Cutting-Edge Solution"):
+if st.button("Generate Innovative Web Solution"):
     if prompt.strip() == "":
         st.error("Please enter a valid prompt.")
     else:
-        with st.spinner("Generating state-of-the-art solution..."):
+        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("Expert-level solution generated successfully!")
+                st.success("Innovative web solution generated successfully!")
                 
-                # Improved language detection
-                languages = ["python", "javascript", "java", "c++", "rust", "go", "ruby", "swift", "kotlin", "typescript"]
-                detected_language = next((lang for lang in languages if lang in completed_text.lower()), "plaintext")
+                # 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)
                 
@@ -267,26 +288,34 @@ if st.button("Generate Cutting-Edge Solution"):
                 st.markdown('</div>', unsafe_allow_html=True)
                 st.markdown('</div>', unsafe_allow_html=True)
 
-                st.markdown("### In-Depth Analysis and Insights")
-                explanation = generate_response(f"Provide a comprehensive analysis of the solution for: {prompt}. Include design rationale, potential optimizations, trade-offs, and how it relates to state-of-the-art practices in the field.")
+                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")
-                alternatives = generate_response(f"Suggest and briefly explain three alternative approaches to solving the problem: {prompt}. Compare their pros and cons with the original solution.")
+                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 tech news
-news = fetch_latest_tech_news()
-if news:
-    st.markdown('<div class="tech-news">', unsafe_allow_html=True)
-    st.markdown("### Latest in Tech & Computer Science")
-    for item in news:
-        st.markdown(f"- {item['title']}")
+# 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: #8892b0;'>
-    Engineered with 🧠💡 by Your Superintelligent AI Code Assistant
+<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)