Function Visualizer

1.1 What is Function Visualizer?

Function Visualizer (Version 3) is a comprehensive, AI-powered educational platform specifically designed to help students master the mathematics curriculum prescribed by the National Council of Educational Research and Training (NCERT) of India. The system covers Classes 9, 10, 11, and 12, corresponding to high school mathematics education.

1.2 The Educational Problem It Solves

Traditional mathematics education often presents concepts in a static, text-heavy format. Students struggle to visualize abstract functions, understand the geometric meaning of calculus operations, or see the step-by-step reasoning behind complex algebraic manipulations. This project addresses these challenges by providing:

• Dynamic Visualizations: Real-time, interactive graphs that respond to user input.
• Step-by-Step Solutions: Detailed breakdowns of how a problem is solved, showing every intermediate step.
• AI-Powered Tutoring: A context-aware AI assistant that can explain concepts, answer questions, and guide students through problems.
• Structured Curriculum: Content organized strictly according to the NCERT syllabus.

1.3 Who Is It Designed For?

• Students: The primary audience. Students in Classes 9-12 can use the platform to learn, practice, and visualize mathematical concepts.
• Teachers: Educators can use the platform as a teaching aid, demonstrating concepts interactively during lessons.
• Self-Learners: Anyone interested in mathematics can benefit from the structured curriculum and AI assistance.
• Developers and Contributors: The project is open source, inviting contributions from the developer community.

1.4 Core Subject Areas

1.5 Open Source and Versioning

We believe that educational tools should be transparent and accessible to all. That is why this project is Fully Open Source.

• Source Code: Complete code is available on GitHub under the user Adarsh-61.
• Version 3: This is the third major iteration of the project. It represents a "ground-up" rewrite, moving away from the limitations of earlier Python-only GUI frameworks to a modern, web-standard architecture. It is faster, smarter, and significantly more robust than its predecessors.

2.1 Structured NCERT Curriculum

The platform mirrors the official NCERT syllabus for Mathematics. Content is organized hierarchically:

1. Class Level: Select from Class 9, Class 10, Class 11, or Class 12.
2. Chapter Level: Each class contains multiple chapters as defined in the NCERT textbooks.
3. Topic Level: Each chapter is broken down into individual topics for focused learning.

The platform includes content spanning dozens of chapters across four academic years. The exact number of topics, formulas, and examples is large-scale and continuously expanding.

2.2 Chapter-Wise and Topic-Wise Explanations

Every topic includes:

• A clear, textual explanation of the underlying concept.
• LaTeX-rendered mathematical notation for precise representation of formulas.
• Key definitions, theorems, and properties relevant to the topic.

2.3 Step-by-Step Solved Examples

For every major formula or technique, the platform provides worked examples. These are not just answer sheets; each example includes:

• The problem statement.
• A numbered, sequential breakdown of the solution process.
• Explanations for why each step is taken.
• The final answer, clearly marked.

2.4 Interactive Formula Solvers (Dynamic Solvers)

Unlike static pages, the platform includes interactive solvers that allow users to input their own values and receive computed results. These solvers:

• Accept user-defined variables (e.g., coefficients, limits).
• Perform the computation using the backend mathematical engine.
• Display the result along with a step-by-step derivation.
• Render all output in LaTeX for clarity.

2.5 Dynamic Graph Generation

The platform generates interactive graphs for mathematical concepts. These graphs are:

• Powered by Plotly.js, a high-performance graphing library.
• Interactive: users can zoom, pan, and hover over points for details.
• Context-aware: graphs are generated based on the topic being studied.

2.6 AI-Assisted Learning ("Ask AI")

The "Ask AI" feature is available throughout the platform. It provides:

• Contextual Awareness: When a student asks a question from within a specific topic, the AI is aware of this context.
• Step-by-Step Explanations: The AI prioritizes explaining the "Why" and "How".
• Mathematical Notation: Responses include properly formatted LaTeX equations.
• Concept Clarification: Students can ask about definitions, theorems, or general concepts.

2.7 Clean Navigation Flow

The user experience is designed for clarity:

• Home Page: Provides an overview of the platform and access to all modules.
• NCERT Section: Hierarchical navigation from Class to Chapter to Topic.
• Module Pages: Direct access to specialized tools (e.g., Calculus solvers).
• AI Assistant Page: A dedicated chat interface for interacting with the AI tutor.

4.1 Component Overview

The system consists of four primary layers:

4.2 Data Flow

1. User Request: A student navigates to a topic page or uses a solver.
2. Frontend Rendering: The frontend loads content or displays the solver UI.
3. API Call: If computation is needed, a request is sent to the FastAPI backend.
4. Backend Processing: The backend performs symbolic computation using SymPy.
5. Response & Display: The result is returned and rendered using KaTeX and Plotly.js.

4.3 AI Flow: The "Dual-Path" Engine

The system uses a smart routing mechanism to decide how to process your questions:

1. User Query: You ask a question (e.g., "Explain the chain rule").
2. Mode Check: The system checks your AI_MODE setting.
3. Path Selection:
   • Path A (Local - Preferred): Connects to your local Ollama instance. Data never leaves your network. Uses gemma3n:e2b.
   • Path B (Cloud - Optional): Connects to OpenRouter securely. Uses DeepSeek R1.
4. Streaming: The text is streamed token-by-token for an instant "typing" feel.

6.1 Prerequisites

• Python 3.11 or higher (for Backend).
• Node.js LTS (20.x) (for Frontend).
• Git (for cloning the repository).

6.2 Backend Setup (Conceptual)

1. Clone the Repository: Obtain the source code from the project repository.
2. Create a Virtual Environment: Isolate project dependencies.
3. Install Dependencies: Install packages from requirements.txt.
4. Configure Environment Variables: Create a .env file with your AI_MODE preference.
5. Run the Server: Start the FastAPI application via uvicorn.

6.3 Frontend Setup (Conceptual)

1. Navigate to Frontend: Go to the frontend directory.
2. Install Dependencies: Run npm install.
3. Run Dev Server: Start the app with npm run dev.

6.4 AI Setup (Ollama)

Highly Recommended for Local-First Experience

To enable the preferred locally-hosted AI features:

1. Download Ollama: Visit ollama.com and download the installer.
2. Install the Model: Run ollama run gemma3n:e2b in your terminal. This pulls the optimized math model.
3. Verify: Ensure Ollama is running. The app will detect it automatically on localhost.

6.5 Docker Setup (Conceptual)

For containerized deployment:

1. Backend Dockerfile: Builds a minimal, production-ready Python image.
2. Frontend Dockerfile: Builds a standalone Next.js image.
3. Docker Compose: Orchestrates both services.
4. Security: Uses Docker Hardened Images (DHI) with non-root users.

6.6 Cross-Platform Compatibility

• Windows: Fully supported.
• macOS: Fully supported.
• Linux: Fully supported.

7.1 Navigation Overview

• Navbar: Links to all major sections (Home, NCERT, Solvers, AI Assistant).
• NCERT Section: Hierarchical navigation from Class to Chapter to Topic.
• Module Pages: Direct access to specialized tools.

7.2 Navigating the NCERT Curriculum

1. Click "NCERT" in the Navbar.
2. Select your Class (9, 10, 11, or 12).
3. Browse the list of Chapters for that Class.
4. Click a Chapter to see its Topics.
5. Click a Topic to view the explanation, examples, and solvers.

7.3 Using Interactive Solvers

Input Syntax Rules:

• Use x^2 for powers.
• Use sin(x), cos(x), tan(x).
• Use sqrt(x) for square root.
• Use parentheses to group terms: (x+1)*(x-1).

7.4 Interpreting Graphs

• Zoom: Use scroll wheel or pinch.
• Pan: Click and drag.
• Hover: See coordinates.
• Legend: Click items to show/hide traces.

7.5 Using the AI Assistant

1. Navigate to "AI Assistant" from the Navbar.
2. Type your mathematical question.
3. Press Enter or click Send.
4. Read the step-by-step explanation.

The AI is a tutor, not a replacement for understanding. Use it to learn, not to copy answers.

8.1 The Design Philosophy: Why Local?

Mathematics education requires focus and consistency. Reliance on cloud APIs often introduces latency, potential costs, and the risk of server outages. By prioritizing Local AI, we treat the AI model like a library installed on your computer—always there, always fast, and completely private.

We use Ollama, a powerful tool for running large language models locally, combined with gemma3n:e2b, a model specifically optimized for mathematical reasoning and efficient performance on consumer hardware.

However, we understand that not every device has the power to run a model locally. Therefore, the system remains flexible, offering a seamless "Cloud Mode" via OpenRouter as an alternative.

8.2 Supported Models

• Local Model (Default & Preferred): gemma3n:e2b via Ollama.Why this model? It strikes the perfect balance between speed and mathematical accuracy, small enough to run on most laptops but smart enough to solve calculus problems.
• Cloud Model (Optional): DeepSeek R1 (0528) via OpenRouter.Why this model? DeepSeek R1 is currently one of the world's leading open-weights models for logic and code, offering a higher tier of reasoning if you cannot run local models.

8.3 How the System Decides (AI Modes)

The system behavior is controlled by a simple configuration setting called AI_MODE. This transparency allows you to know exactly where your data is going.

8.4 The Educational Goal

Regardless of whether the AI is running locally or in the cloud, its instructions remain the same: Teach, don't just solve.

We successfully prompt both models to avoid giving direct answers. Instead, the AI serves as a Socratic Tutor:

1. Context Injection: It looks at what you are studying (e.g., "Differentiation") and helps you within that context.
2. Step-by-Step Reasoning: It breaks down problems into logical steps.
3. LaTeX Formatting: It speaks the language of math, returning beautifully formatted equations.

This approach ensures that the technology aids your learning journey rather than bypassing it.