Forem: Gorchene Bader

Deploy Open Source SLMs (Small Language Models) locally - DeepSeek R1 Distilled .

Gorchene Bader — Sun, 09 Feb 2025 13:25:51 +0000

Building Free AI Agents: Setting Up Ollama for AI Models

This post is part of a series where we break down each step in creating fully free AI agents capable of handling various tasks.

While this may be a common topic, this tutorial will guide you through each step to develop a more comprehensive solution.

For this task, we have two main options:

Using Hugging Face libraries – powerful but requires more setup.
Leveraging Ollama – a more streamlined, user-friendly alternative.

To keep things simple and efficient, we’ll focus on Ollama, which offers an easier setup for running AI models.

Step 1: Download and Install Ollama

To get started, we need to install Ollama on our system.

Visit the Ollama Download Page.
Select your operating system (Windows, macOS, or Linux).
Click Download (for Windows and macOS) or copy the installation command (for Linux users).

Since I’m using Linux, I installed Ollama by running this command in my terminal:

curl -fsSL https://ollama.com/install.sh | sh

Step 2: Explore and Download AI Models

Once Ollama is installed, we need to fetch a model to use.

Browse the available models on the Ollama Models Page.
Search for a specific model or scroll through the list of available options.
Once you find a model you like, grab the command to download and run it.

For this tutorial, I’ll be using deepseek-r1:1.5b, a lightweight SLM (Small Language Model) capable of Chain of Thought (CoT) reasoning.

To download and run it, simply enter the following command in your terminal:

ollama run deepseek-r1:1.5b

Step 3: Running the Model for Text Generation

Now that our model is up and running, we can start using it for text generation. Simply enter some input, and let the AI do the rest!

What’s Next?

Thank you for following along! If you have any feedback, feel free to share it.

In the next post, we’ll take this further by integrating the model into a Python application, showcasing how to make this SLM truly useful. Stay tuned! 🚀

Deploy Yolov8 model locally using FastAPI x ReactJS 🐍⚡

Gorchene Bader — Wed, 04 Sep 2024 17:44:36 +0000

Hello, data science enthusiasts! In this tutorial, we'll walk through the process of deploying a YOLOv8 object detection model using FastAPI for the backend microservice and ReactJS for the frontend interface.

First, make sure you have Python installed on your system. Then, let's create our project directory:

mkdir Yolov8_Fast_React
cd Yolov8_Fast_React

Next, we'll set up a Python virtual environment to keep our dependencies isolated:

python -m venv env
source env/bin/activate

With the virtual environment activated, we can now proceed to install the necessary dependencies. We'll use FastAPI for the backend and React for the frontend:

pip install fastapi uvicorn ultralytics opencv-python-headless numpy

Now that we have the required tools, let's start building the backend API using FastAPI:

touch main.py

In the main.py file, we'll define the API endpoints and handle the object detection logic:

from fastapi import FastAPI, File, UploadFile
import cv2
import numpy as np
from ultralytics import YOLO
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
model = YOLO("yolov8n.pt")

allowed_origins = [
    "http://localhost",
    "http://localhost:3000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=allowed_origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/detect/")
async def detect_objects(file: UploadFile):
    # Process the uploaded image for object detection
    image_bytes = await file.read()
    image = np.frombuffer(image_bytes, dtype=np.uint8)
    image = cv2.imdecode(image, cv2.IMREAD_COLOR)

    # Perform object detection with YOLOv8
    results = model.predict(image)

    # Process the detection results and return a response
    detections = []
    for result in results[0].boxes:
        x1, y1, x2, y2 = result.xyxy[0]
        confidence = result.conf[0]
        class_id = result.cls[0]
        detections.append({
            "x1": float(x1),
            "y1": float(y1),
            "x2": float(x2),
            "y2": float(y2),
            "confidence": float(confidence),
            "class_id": int(class_id)
        })
        print(detections)

    return {"detections": detections}

Next, let's create the frontend using React:

npx create-react-app frontend
cd frontend
npm start

In the React app, we'll create a simple interface to upload an image and display the detected objects:

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [image, setImage] = useState(null);
  const [detections, setDetections] = useState([]);

  const handleImageUpload = async (event) => {
    const file = event.target.files[0];
    setImage(file);

    const formData = new FormData();
    formData.append('file', file);

    const response = await axios.post('/detect', formData);
    setDetections(response.data.objects);
  };

  return (
    <div>
      <input type="file" onChange={handleImageUpload} />
      {image && (
        <div>
          <img src={URL.createObjectURL(image)} alt="Uploaded" />
          {detections.map((detection, index) => (
            <div key={index}>
              Object at {detection[0]}, {detection[1]}, {detection[2]}, {detection[3]}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

Finally, to run the full application, start the FastAPI backend and the React frontend in separate terminals:

# Backend
uvicorn main:app --reload

# Frontend
cd frontend
npm start

The application should now be accessible at http://localhost:3000, allowing you to upload images and view the detected objects using the YOLOv8 model.

Use TailwindCSS with Next.JS & TypeScript

Gorchene Bader — Thu, 17 Nov 2022 10:01:15 +0000

Next.JS has been one of the most powerful and popular fullStack web frameworks which is based on ReactJS, combined with TailwindCSS and TypeScript it gives us a better and a faster way for building fast and modern web applications, and in this post we will learn how to create your project using these technologies.

First way is to install it all when creating project using "npx" :

npx create-next-app -e with-tailwindcss --ts

you type "y" for yes and it will demand the name of your project like this:

after naming your project and everything is downloaded you're left with a basic Next.JS x TailwindCSS x TypeScript Project.

Second case is that you have an existing Next.JS project and you want to add TypeScript and/or TailwindCSS to it:

2.1. For TypeScript you need to create tsconfig.json you can do that by the usual way or by typing this in the command line of your choice in your project directory :

if you're using git Bash (which i recommend) or linux terminal you can use:

touch tsconfig.json

-if you're using CMD for Windows or Powershell then you can use:

type [<drive>:][<path>] tsconfig.json

echo [content] > [<path>\tsconfig.json]

and then execute this command:

npm install --save typescript @types/node @types/react

2.2. For TailwindCSS you just need to run few commands and modify a couple of files:

first thing you need to do is to run the following commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

-then in the tailwind.config.js you copy this lines:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

and also for the file "styles\globals.css" you add on top these three imports:

@tailwind base;
@tailwind components;
@tailwind utilities;

And the last thing you wanna do is to import golbals.css in your main project folder pages_app.tsx or (app\layout.tsx in Next.JS 13):

import '../styles/globals.css'

And that's it now after migrating you're project from js to ts you're good to go..