import streamlit as st from huggingface_hub import InferenceClient import os # 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 # 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?" } ] # 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() # 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). """ )