Smart Notes — Local AI (Using Ollama + Flask + Vanilla JS)

Smart Notes is a lightweight local AI application that lets you summarize text, generate bullet summaries, create quizzes, and ask questions — all powered entirely by Ollama running locally. It provides a simple frontend interface and a Flask backend that interacts with a local LLM (e.g., llama3.2:3b).

This project is ideal for beginners who want to understand how to:

• Connect a frontend to a backend
• Make API calls to a local LLM
• Parse and format streamed model responses
• Build a simple real-world AI application

---

📁 Project Structure

smart-notes/
│
├── README.md (this file)
│
├── backend/
│ ├── app.py
│ ├── requirements.txt
│ └── .venv/
│
├── frontend/
│ └── index.html

---

🧠 Backend — Flask API Server (backend/app.py)

The backend is a Python Flask server that exposes API endpoints used by the frontend. It communicates with Ollama running on the user’s machine.

Key Responsibilities

• Receives text from the frontend
• Sends chat requests to Ollama (/api/chat endpoint)
• Parses NDJSON streamed output from Ollama
• Merges chunks into a full assistant message
• Returns clean JSON responses back to the frontend

Main Endpoints

Endpoint	Method	Purpose
/api/summarize	POST	Create a summary (normal or bulleted)
/api/quiz	POST	Generate quiz questions from text
/api/ask	POST	Ask arbitrary questions about the text

How the Backend Works

1. Accepts frontend input

body = request.json
text = body.get("text", "")

2. Builds a message list for Ollama

messages = [
  {"role": "system", "content": "You are an assistant..."},
  {"role": "user", "content": user_prompt}
]

3. Sends request to Ollama

resp = requests.post("http://localhost:11434/api/chat", json=payload)

4. Parses NDJSON (streamed responses)

Ollama returns multiple JSON objects, each one a token chunk. The code merges them into one coherent assistant message.

5. Returns a clean result

{
  "ok": true,
  "text": "Final summarized output..."
}

---

🌐 Frontend — Vanilla JS + HTML (frontend/index.html)

The frontend provides a clean UI for interacting with the backend.

Key Features

• Textarea for input

• Buttons: Summarize, Bulleted Summary, Make Quiz, Ask Question

• Output area with formatted HTML rendering

• JavaScript handles:

  • Fetching API calls
  • Displaying loading state
  • Converting backend JSON into readable formatted UI

How the Frontend Works

1. User enters text

2. User clicks a button (e.g., Summarize)

Calls:

summarize("normal")

3. Frontend sends POST to Flask

fetch('/api/summarize', {...})

4. Gets response from backend and formats it

The frontend uses a helper formatAssistantText() to convert:

• \n → HTML paragraphs
• list markers *, - → bullet lists
• **bold** → <strong>

5. Displays formatted output inside the result box

document.getElementById('result').innerHTML = formattedHTML;

---

⚙️ Installation & Running Locally

Follow these steps to run Smart Notes on your own computer.

1️⃣ Install Ollama

Go to: https://ollama.com/download

Then install a model:

ollama pull llama3.2:3b

2️⃣ Install WSL (if on Windows)

Open PowerShell as Administrator:

wsl --install

Reboot.

3️⃣ Clone this project

git clone <your-repo-url>
cd smart-notes/backend

4️⃣ Create virtual environment

python3 -m venv .venv
source .venv/bin/activate

5️⃣ Install backend dependencies

pip install -r requirements.txt

Required packages include:

• Flask
• Requests
• (Optional) python-dotenv

6️⃣ Start the backend server

python app.py

You will see:

Running on http://127.0.0.1:5000

7️⃣ Open the frontend

Open frontend/index.html in your browser.

Note: It directly calls /api/... on the Flask backend.

---

🧪 Testing the API Directly (Optional)

To test without UI:

curl -X POST http://127.0.0.1:5000/api/summarize \
  -H "Content-Type: application/json" \
  -d '{"text":"Hello world. Summarize this."}'

---

🚀 Features You Can Add Next

• Chat history
• Markdown rendering
• Model selector dropdown
• PDF export
• Voice-to-text input
• Using embeddings + RAG

If you'd like, I can help implement any of these.

---

🤝 Contribution Guidelines

Pull requests are welcome!

• Keep code simple
• Use clear comments
• Ensure formatting works even for multi-paragraph LLM output

---

📄 License

MIT License — free for personal and commercial use.

---