CAAI-Front End #3 Git & Docker Push

🚀 Deploying Your Angular App with Docker – The Fun Way!

Prerequisite: Installation of 

1. Docker Desk top 
2. Visual Studio Code, (with or w/o your angular project)
3. Node.js,  
4. Docker Extension for VS. 

Let’s break it down into two easy stages. No boring explanations—just simple, fun, and straight to the point! 🎉

---

🎨 Step 1: Create Your Angular Project

First things first, let’s create our Angular project and get things rolling. Open your terminal and type:

ng new front-end  # This creates a new Angular app Skip this if u have already project
cd front-end      # Move into the project folder
ng serve          # Start the app on localhost:4200

Now, check if your app is running in the browser. If yes, you’re awesome. If not, well… double-check the steps above. 😆

---

🐳 Step 2: Create the Dockerfile

Docker loves instructions, so we’ll create a Dockerfile to tell it what to do. Create a file named Dockerfile in your project root and add the following:

🔨 Stage 1: Build Angular Code

# Use the latest Node.js for building
FROM node:latest AS build

WORKDIR /usr/local/app

COPY ./ /usr/local/app/

RUN npm install  # Install dependencies
RUN npm run build  # Build the Angular app

What’s happening here? We:

1. Pulled the latest Node.js image
2. Set our working directory
3. Copied all our project files into the container
4. Installed dependencies & built the project (Boom! 🎆)

🌐 Stage 2: Serve with Nginx

# Use the latest Nginx image for serving the app
FROM nginx:latest

COPY --from=build /usr/local/app/dist/front-end /usr/share/nginx/html  # Change 'front-end' if needed

EXPOSE 80  # Open port 80 for the webserver

Now, we:

1. Pulled the latest Nginx image
2. Copied the compiled Angular app to the Nginx web root
3. Exposed port 80 so the world can see our masterpiece 🌎

---

🚢 Step 3: Build & Run the Docker Image

Build the Angular project before creating the image:

ng build  # This will generate the 'dist' folder

Now, let’s build the Docker image and run it:

docker build -t my-angular-app .  # Replace 'my-angular-app' with your preferred name
docker run -p 80:80 my-angular-app  # Runs your app on port 80

🎉 Open your browser and visit http://localhost:80—your Angular app is now running inside a Docker container! 🚀

---

📌 Step 4: Push Your Project to GitHub (With Git hub account for immbizsoft)

Let’s store our project in a GitHub repository. First, initialize Git:

git init  # Initialize a new Git repository
git add .  # Stage all files
git commit -m "Initial commit"  # Commit the files

Now, connect your project to GitHub:

git remote add origin https://github.com/immbizsoft/front-end.git  # Replace with your actual repository URL
git branch -M main  # Set the default branch to main
git push -u origin main  # Push your code to GitHub

Boom! 🎆 Your Angular project is now safely stored on GitHub.

---

🏁 That’s It!

Now you’ve officially dockerized your Angular app AND pushed it to GitHub! You can share it, deploy it, or just feel cool knowing you’re a DevOps pro. 😎

Got any questions? Drop them in the comments below! Happy coding! 💻🎈

CAAI-AI #2 Docker Operations

1. Create a Dockerfile for the Ollama Service (Dockerfile.ollama)

FROM python:3.11-slim
ENV DEBIAN_FRONTEND=noninteractive
WORKDIR /app
# Install required dependencies
RUN apt update && apt install -y curl && rm -rf /var/lib/apt/lists/*
# Install Ollama
RUN curl -fsSL https://ollama.com/install.sh | bash
# Ensure Ollama is in PATH
ENV PATH="/root/.ollama/bin:$PATH"
# Copy entrypoint script and make it executable
COPY ollama-entrypoint.sh /usr/local/bin/ollama-entrypoint.sh
RUN chmod +x /usr/local/bin/ollama-entrypoint.sh
EXPOSE 11434
ENTRYPOINT ["/usr/local/bin/ollama-entrypoint.sh"]

---

2. Create the Entry Point Script for Ollama (ollama-entrypoint.sh)

#!/bin/bash
# Ensure Ollama is installed and in PATH
export PATH="/root/.ollama/bin:$PATH"
# Start Ollama
# /root/.ollama/bin/ollama serve &
ollama serve &
# Wait for Ollama to initialize
sleep 5
# Pull the Llama3 model
# /root/.ollama/bin/ollama pull llama3:8b
ollama pull llama3.2
# Keep the container running
wait

---

3. Create a Dockerfile for the Streamlit Service (Dockerfile.streamlit)

FROM python:3.11-slim

WORKDIR /app

# Copy dependency file and install packages

COPY requirements.txt .

RUN pip install --no-cache-dir -r requirements.txt

# Copy your app code

COPY . .

EXPOSE 8501

CMD ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]

4. Create a Docker Compose File (docker-compose.yml)

version: '3.8'

services:

  ollama:

    build:

      context: .

      dockerfile: Dockerfile.ollama

    ports:

      - "11434:11434"

  streamlit:

    build:

      context: .

      dockerfile: Dockerfile.streamlit

    ports:

      - "8501:8501"

    depends_on:

      - ollama

Steps to Run

1. Place the two Dockerfiles and the entrypoint script in your project folder.

2. Make sure you have a valid requirements.txt (e.g., with streamlit).

3. Place your app.py in the same folder.

4. Run the following command in the project directory:

    docker-compose build --no-cache

5.  You will get two images ollama-service:latest, streamlit-service:latest

6.  You will run both to make as containers

7.  Right click on streamlit-service:latest container to get a dropdown. 

8.  Pick open in browser to see the screen as shown below: 

Wow! We have made Dockerfile in parts and created Images for services ollama, streamlit. We have also run in container!!! Great !!!

CAAI-AI#1 - First Steps

🚀 CAAI-AI Module 1: The GitHub Way & Running Locally! 🧑‍💻

Hey there, AI explorer! 🌍✨ Ready to get CAAI-AI running on your local machine like a boss? Let’s break it down into easy steps! 🔥

---

📌 Step 1: Install the Essentials (Pre-Requisites) 🛠️

Before diving in, make sure you have these installed:

✅ Python 🐍 – Get it from Python.org
✅ Visual Studio Code (VS Code) 👨‍💻 – Download here
✅ Docker Desktop 🐳 – Essential for containerized magic!
✅ GitHub Desktop 🦸‍♂️ – Makes cloning easy-peasy!

👉 Once installed, restart your system (it helps avoid weird issues!) 🔄

---

📌 Step 2: Download & Install Ollama

Ollama is your AI model manager. Let’s set it up!

1️⃣ Download Ollama from ollama.com
2️⃣ Install it (just like any regular app)
3️⃣ Pull the AI Model (Run this in Command Prompt):

ollama pull llama3.2  # Get your AI brain ready!

💡 Now, you’ve got your AI model ready to rock! 🤖🔥

---

📌 Step 3: Clone the CAAI-AI Repository

Time to grab the project files from GitHub!

🎯 Open Command Prompt and run:

git clone https://github.com/immbizsoft/caai-ai.git

🎯 Navigate into the project folder:

cd caai-ai

✅ Check if all necessary files are there:

• .py files (Python scripts) 🐍
• requirements.txt (Dependencies list) 📜
• README.md (Project guide) 📖

🚀 Boom! You now have the project files on your machine!

---

📌 Step 4: Install Dependencies

🎯 Inside VS Code Terminal, run:

pip install -r requirements.txt

💡 This will install all the Python libraries needed for your project! 🏗️

---

📌 Step 5: Run the AI App! 🚀

🎯 Inside VS Code Terminal, start the application:

streamlit run app.py

🎉 And just like that… You should see your AI-powered app running in a browser! 🌟

---

💡 Troubleshooting Tips:

🔧 If something doesn’t work, try:

• Running python --version to check if Python is installed.
• Running pip list to verify dependencies.
• Restarting VS Code if things seem stuck.

---

🎯 That’s It! You’re Now an AI Engineer! 🦾

You just set up CAAI-AI on your local machine! Now go ahead, experiment, and build some AI magic! ✨🚀

🔥 Next Steps? Deploy this to the cloud? Connect it with Ollama? Let me know if you need more guides!

🔗 Happy coding! The AI revolution starts with YOU! 🎉💡

GCP#1

Module 1: Logging into Google Cloud Console

Step 1: Sign in to Google Cloud

1. Open Google Cloud Console.
2. Sign in with your Google account.
3. If this is your first time, you might need to create a new project.

Step 2: Create a Google Cloud Project

1. Click on the project dropdown (top navigation bar).
2. Select New Project.
3. Give it a name (e.g., MyAIProject).
4. Choose a billing account (if applicable) and location.
5. Click Create.

Step 3: Enable Required APIs

1. Go to APIs & Services > Library.
2. Search for and enable:
   • Compute Engine API (for virtual machines)
   • AI & Machine Learning APIs (like Vertex AI)
   • Cloud Storage API (for storing data)
3. Go to IAM & Admin and ensure you have the necessary permissions.

---

Module 2: Running an AI Project Using Ollama

Step 1: Set Up a Google Cloud VM

1. Navigate to Compute Engine > VM Instances.
2. Click Create Instance.
3. Choose a machine type:
   • n1-standard-2 (for small workloads)
   • n1-highmem-4 (for AI models)
4. Select Ubuntu 22.04 as the OS.
5. Allow HTTP and HTTPS traffic.
6. Click Create.

Step 2: Install Ollama on the VM

1. Connect to your VM via SSH:

   gcloud compute ssh my-instance-name --zone=us-central1-a
   

2. Install Ollama:

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

3. Start Ollama:

   ollama serve &
   

4. Download an AI model:

   ollama pull deepseek-r1:1.5b
   

Step 3: Run AI Inference

1. Install dependencies:

   pip install langchain langchain-ollama
   

2. Create a Python script (app.py):

   from langchain_core.prompts import ChatPromptTemplate
   from langchain_ollama.llms import OllamaLLM
   
   template = """Question: {question}
   Answer: Let's think step by step."""
   prompt = ChatPromptTemplate.from_template(template)
   model = OllamaLLM(model="deepseek-r1:1.5b")
   chain = prompt | model
   response = chain.invoke({"question": "What is Mixture of Experts?"})
   print(response)
   

3. Run the script:

   python app.py
   

---

Module 3: Creating an Angular Project

Step 1: Install Node.js and Angular CLI

1. Install Node.js (LTS version) from Node.js.
2. Install Angular CLI:

   npm install -g @angular/cli
   

Step 2: Create a New Angular Project

1. Create the project:

   ng new my-angular-app --style=scss
   

2. Navigate to the project folder:

   cd my-angular-app
   

Step 3: Add Angular Material

1. Install Angular Material:

   ng add @angular/material
   

2. Choose a theme (e.g., Indigo Pink).
3. Enable typography and animations.

Step 4: Create a Sample Component

1. Generate a component:

   ng generate component dashboard
   

2. Modify dashboard.component.html:

   <mat-toolbar color="primary">Welcome to My AI Dashboard</mat-toolbar>
   <button mat-raised-button color="accent">Click Me</button>
   

Step 5: Run the Angular App

ng serve --open

---

🚀