Setting Up DeepSeek Chat Application on Raspberry Pi 5

by Gadget Pi
0 Comments
Tutorial
255 Views

In this guide, we will walk you through the steps to set up and run a DeepSeek Chat application on your Raspberry Pi 5. You will create a Node.js backend that communicates with the DeepSeek AI model and serves a simple frontend chat interface.

Prerequisites

Before starting, ensure the following:

Raspberry Pi 5 running Raspberry Pi OS (latest version).
Node.js installed on your Raspberry Pi 5.
DeepSeek installed and running on your Raspberry Pi 5.

Step 1: Prepare Raspberry Pi 5

Install Raspberry Pi OS: If you haven’t already installed Raspberry Pi OS on your Raspberry Pi 5, follow the official guide to flash the OS to your SD card and boot up the Raspberry Pi.
Update the system: Open the terminal and run the following commands to ensure your Raspberry Pi is up-to-date:
```
sudo apt update && sudo apt upgrade -y
```

Step 2: Install DeepSeek on Raspberry Pi 5

Install DeepSeek: Open the terminal on your Raspberry Pi 5 and run the following command to install DeepSeek:
```
curl -fsSL https://ollama.com/install.sh | sh
```
This command downloads and installs DeepSeek on your Raspberry Pi.
Start DeepSeek: Once the installation is complete, start DeepSeek with the following command:
```
deepseek run deepseek-r1:1.5b
```
This will run the DeepSeek model locally on your Raspberry Pi 5. The model will listen for API requests at http://127.0.0.1:11434/api/generate.

Step 3: Install Node.js and Set Up the Project

Install Node.js: If you haven’t already installed Node.js on your Raspberry Pi 5, run the following commands:
```
sudo apt install nodejs -y
sudo apt install npm -y
```
Create a New Project Directory: Create a new folder for your project:
```
mkdir deepseek-chat
cd deepseek-chat
```
Initialize Node.js Project: Run the following command to initialize a new Node.js project:
```
npm init -y
```
Install Required Packages: Install the necessary dependencies for the project:
```
npm install express node-fetch
```

Step 4: Create the Backend (Node.js API)

Create and Edit server.js Using nano: In your project directory, create and edit the server.js file:

sudo nano server.js

Paste the following backend code into the file:

const express = require('express');
const path = require('path');
const fetch = require('node-fetch'); // for making requests to the DeepSeek API

const app = express();
const port = 3000;

// Serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, 'public')));

// Serve the frontend index.html on the root route
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// API route for streaming data from DeepSeek API
app.post('/api/generate', express.json(), async (req, res) => {
    const { prompt } = req.body;

    try {
        // Fetch from the DeepSeek API
        const response = await fetch('http://127.0.0.1:11434/api/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                model: 'deepseek-r1:1.5b',
                prompt: prompt,
            }),
        });

        // Check if the API response is a stream
        if (response.body) {
            // Pipe the response body stream directly to the client
            response.body.pipe(res);
        } else {
            // If there's no stream, send the full response as JSON
            const data = await response.json();
            res.json(data);
        }
    } catch (error) {
        console.error('Error occurred while calling DeepSeek API:', error);
        res.status(500).send('Internal Server Error');
    }
});

// Start the server
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

After pasting the code, press CTRL + X to exit, then press Y to confirm saving the file, and press Enter to save and close.

Step 5: Create the Frontend (Chat Interface)

Create the public Folder: In your project directory, create a folder called public:
```
mkdir public
```

Create and Edit index.html Using nano: In the public folder, create and edit the index.html file:

sudo nano public/index.html

Paste the following HTML and JavaScript code into the file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek Chat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .chat-container {
            width: 400px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .chat-box {
            height: 300px;
            overflow-y: auto;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        .user-input {
            display: flex;
            gap: 10px;
        }
        input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        .message {
            padding: 10px;
            margin: 5px 0;
            border-radius: 5px;
        }
        .user {
            background-color: #007bff;
            color: white;
            align-self: flex-end;
        }
        .bot {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <h2>DeepSeek Chat</h2>
        <div class="chat-box" id="chat-box"></div>
        <form id="api-form" class="user-input">
            <input type="text" id="prompt" name="prompt" placeholder="Ask something..." required>
            <button type="submit">Send</button>
        </form>
    </div>

    <script>
    document.getElementById('api-form').addEventListener('submit', async (event) => {
        event.preventDefault();

        const promptInput = document.getElementById('prompt');
        const chatBox = document.getElementById('chat-box');
        const prompt = promptInput.value;
        promptInput.value = '';

        // Add user message
        const userMessage = document.createElement('div');
        userMessage.classList.add('message', 'user');
        userMessage.textContent = prompt;
        chatBox.appendChild(userMessage);
        chatBox.scrollTop = chatBox.scrollHeight;

        // Add bot response container
        const botMessage = document.createElement('div');
        botMessage.classList.add('message', 'bot');
        chatBox.appendChild(botMessage);

        try {
            const response = await fetch('/api/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ prompt: prompt })
            });

            if (!response.body) {
                throw new Error('Readable stream not supported');
            }

            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            botMessage.textContent = '';

            while (true) {
                const { value, done } = await reader.read();
                if (done) break;

                const chunk = decoder.decode(value, { stream: true });
                botMessage.textContent += chunk;
                chatBox.scrollTop = chatBox.scrollHeight;
            }
        } catch (error) {
            botMessage.textContent = 'Error fetching response.';
        }
    });
    </script>
</body>
</html>

After pasting the code, press CTRL + X to exit, then press Y to confirm saving the file, and press Enter to save and close.

Step 6: Start the Server

Run the Node.js Server: In your terminal, navigate to the project directory and start the server:
```
node server.js
```
Access the Application: Open your browser and go to http://localhost:3000. You should now see the chat interface. Type a prompt, and the bot will respond with a DeepSeek-generated reply.