Create Next.js Q/A Chatbot with Deepseek V3 integration

src/streamlit_app.py

@@ -1,40 +1,161 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+from huggingface_hub import InferenceClient
+import os
 
-"""
-# Welcome to Streamlit!
+# Set up the page config
+st.set_page_config(
+    page_title="Next.js Q/A Chatbot",
+    page_icon="⚛️",
+    layout="centered",
+    initial_sidebar_state="expanded"
+)
+
+# Initialize the Hugging Face Inference Client
+@st.cache_resource
+def get_inference_client():
+    # Using deepseek-ai/DeepSeek-V3 as the model
+    return InferenceClient(model="deepseek-ai/DeepSeek-V3")
+
+client = get_inference_client()
+
+# App title and description
+st.title("⚛️ Next.js Q/A Chatbot")
+st.markdown(
+    """
+    Welcome to the **Next.js Q/A Chatbot**! Ask me anything about learning Next.js,
+    from basic concepts to advanced topics. I'm powered by **Deepseek V3** to provide
+    you with helpful, accurate answers about Next.js development.
+    """
+)
+
+# Sidebar with information
+with st.sidebar:
+    st.header("About This Chatbot")
+    st.info(
+        """
+        This chatbot specializes in answering questions about **Next.js**,
+        the React framework for production applications.
+        
+        **Topics I can help with:**
+        - Getting started with Next.js
+        - Pages and routing
+        - API routes
+        - Static generation & server-side rendering
+        - Styling and CSS
+        - Deployment
+        - Performance optimization
+        - And much more!
+        """
+    )
+    
+    st.header("Example Questions")
+    example_questions = [
+        "How do I create a new Next.js project?",
+        "What's the difference between SSG and SSR?",
+        "How do I add CSS to my Next.js app?",
+        "How do I create API routes in Next.js?",
+        "How do I deploy my Next.js app?"
+    ]
+    
+    for question in example_questions:
+        if st.button(question, key=question):
+            st.session_state.user_input = question
 
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+# Initialize chat history
+if "messages" not in st.session_state:
+    st.session_state.messages = [
+        {
+            "role": "assistant",
+            "content": "Hi! I'm your Next.js Q/A assistant. I'm here to help you learn Next.js! What would you like to know?"
+        }
+    ]
 
-In the meantime, below is an example of what you can do with just a few lines of code:
+# Display chat messages
+for message in st.session_state.messages:
+    with st.chat_message(message["role"]):
+        st.markdown(message["content"])
+
+# Get user input
+if prompt := st.chat_input("Ask me anything about Next.js..."):
+    # Add user message to chat history
+    st.session_state.messages.append({"role": "user", "content": prompt})
+    
+    # Display user message
+    with st.chat_message("user"):
+        st.markdown(prompt)
+    
+    # Generate assistant response
+    with st.chat_message("assistant"):
+        message_placeholder = st.empty()
+        
+        # Create a context-aware prompt for Next.js questions
+        system_prompt = """
+You are a helpful Next.js expert assistant. You specialize in helping developers learn and use Next.js effectively.
+Provide accurate, helpful, and practical answers about Next.js development.
+When possible, include code examples and best practices.
+Focus specifically on Next.js topics including:
+- Project setup and configuration
+- Pages, routing, and navigation
+- API routes and server-side functionality
+- Static Site Generation (SSG) and Server-Side Rendering (SSR)
+- Styling (CSS Modules, Tailwind CSS, etc.)
+- Performance optimization
+- Deployment strategies
+- Integration with other tools and libraries
+
+Keep your answers clear, concise, and beginner-friendly while being technically accurate.
 """
+        
+        full_prompt = f"{system_prompt}\n\nUser question: {prompt}\n\nAssistant:"
+        
+        try:
+            # Generate response using Hugging Face Inference API
+            response = client.text_generation(
+                full_prompt,
+                max_new_tokens=500,
+                temperature=0.7,
+                do_sample=True,
+                stop_sequences=["\n\nUser:", "User question:"]
+            )
+            
+            assistant_response = response.strip()
+            message_placeholder.markdown(assistant_response)
+            
+            # Add assistant response to chat history
+            st.session_state.messages.append({"role": "assistant", "content": assistant_response})
+            
+        except Exception as e:
+            error_message = f"Sorry, I encountered an error: {str(e)}. Please try again!"
+            message_placeholder.markdown(error_message)
+            st.session_state.messages.append({"role": "assistant", "content": error_message})
+
+# Handle example questions from sidebar
+if "user_input" in st.session_state:
+    user_question = st.session_state.user_input
+    del st.session_state.user_input
+    
+    # Add user message to chat history
+    st.session_state.messages.append({"role": "user", "content": user_question})
+    
+    # Rerun to process the question
+    st.rerun()
+
+# Clear chat button
+if st.button("🗑️ Clear Chat History"):
+    st.session_state.messages = [
+        {
+            "role": "assistant",
+            "content": "Hi! I'm your Next.js Q/A assistant. I'm here to help you learn Next.js! What would you like to know?"
+        }
+    ]
+    st.rerun()
 
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+# Footer
+st.markdown(
+    """
+    ---
+    
+    **Note:** This chatbot uses Deepseek V3 via Hugging Face Inference API to provide Next.js assistance.
+    For the most up-to-date information, always refer to the [official Next.js documentation](https://nextjs.org/docs).
+    """
+)