HoverBoardSite

An Angular starter template that generates unique hoverboard names using local Generative AI (Ollama/Gemma), with a simple configuration path to switch to Google's cloud-hosted Gemini AI.

This project was generated using Angular CLI version 19.2.17.

Running with Local AI (Ollama & Gemma4)

By default, this application is configured to run with a local AI model via Ollama (e.g., using gemma4 or another downloaded local model).

Setting Up Ollama

1. Download Ollama: Install Ollama on your machine from ollama.com.
2. Download your model: In your terminal, pull the model of your choice:

   ollama pull gemma4

3. Start the server:
   • Desktop App: Open the Ollama application. The server runs automatically in the background on http://localhost:11434.
   • Terminal: Alternatively, start the server using the terminal command:

     OLLAMA_ORIGINS="*" ollama serve

     (Setting OLLAMA_ORIGINS="*" is recommended to prevent CORS blocks in browser-based Angular apps).

Configuring the Service

Open gemini.service.ts and ensure the configuration matches your local model:

private ollamaUrl = 'http://localhost:11434/api/generate';
private modelName = 'gemma4'; // Update this to match your local model name (e.g., 'gemma2')

---

Switching Back to Google Gemini AI

If you prefer to connect to Google's hosted Gemini API instead of running local models, follow these steps:

1. Install Gemini SDK

Install the Google Generative AI SDK in the project root:

npm install @google/generative-ai

2. Update the Service Code

Modify gemini.service.ts to utilize the Gemini SDK:

import { Injectable } from '@angular/core';
import { GoogleGenerativeAI } from '@google/generative-ai';

@Injectable({
  providedIn: 'root',
})
export class GeminiService {
  private genAI: GoogleGenerativeAI;
  private generatedNames: string[] = [];

  constructor() {
    // Initialize the SDK with your API Key
    this.genAI = new GoogleGenerativeAI("YOUR_API_KEY_HERE");
  }

  async generateRandomString(): Promise<string> {
    const model = this.genAI.getGenerativeModel({ 
      model: 'gemini-2.0-flash',
      generationConfig: {
        temperature: 1.5,
      }
    });
    
    let prompt = 'Generate a Hover Board Name. Do not repeat names and always generate a new name.';
    
    if (this.generatedNames.length > 0) {
      prompt += `\\n\\nPreviously generated names (do NOT use these):\\n\${this.generatedNames.join(', ')}`;
    }
    
    try {
      const result = await model.generateContent(prompt);
      const newName = result.response.text().trim();
      
      this.generatedNames.push(newName);
      return newName;
    } catch (error) {
      console.error('Error generating with Gemini:', error);
      return 'Error generating name.';
    }
  }
}

3. Get a Gemini API Key

1. Visit Google AI Studio to generate an API key.
2. Replace "YOUR_API_KEY_HERE" in the service constructor with your key.

⚠️ Security Warning: Never commit API keys directly to version control. For production deployment, use environment variables or security configs to manage secrets.

Development server

To start a local development server, run:

ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.