update toolspage

src/app/chatbot/chatbot.html

@@ -1,10 +1,39 @@
-<div class="chatbot-container">
-  <div class="chatbox">
-    <div *ngFor="let message of messages" class="message">
-      <div class="user-message"><strong>User:</strong> {{ message.user }}</div>
-      <div class="bot-response"><strong>Bot:</strong> {{ message.bot }}</div>
+<!-- src/app/llama-demo/llama-demo.component.html -->
+<div class="card">
+  <h2>GGUF LLaMA – Demo</h2>
+
+  <div class="field">
+    <label>Prompt</label>
+    <textarea rows="6" [formControl]="form.controls.prompt"
+              placeholder="Write your question or instruction here"></textarea>
+  </div>
+
+  <div class="row">
+    <div class="field">
+      <label>Max tokens</label>
+      <input type="number" [formControl]="form.controls.max_tokens" min="16" />
+    </div>
+    <div class="field">
+      <label>Temperature</label>
+      <input type="number" step="0.1" [formControl]="form.controls.temperature" />
+    </div>
+    <div class="field">
+      <label>Top-p</label>
+      <input type="number" step="0.05" [formControl]="form.controls.top_p" />
     </div>
+    <div class="field">
+      <label>Repeat penalty</label>
+      <input type="number" step="0.1" [formControl]="form.controls.repeat_penalty" />
+    </div>
+  </div>
+
+  <button (click)="onGenerate()" [disabled]="isLoading">Generate</button>
+
+  <div class="status" *ngIf="isLoading">Generating…</div>
+  <div class="error" *ngIf="errorMsg">{{ errorMsg }}</div>
+
+  <div class="output" *ngIf="resultText">
+    <h3>Output</h3>
+    <pre>{{ resultText }}</pre>
   </div>
-  <input [(ngModel)]="userQuestion" placeholder="Ask a question..." />
-  <button (click)="getChatbotResponse()">Ask</button>
 </div>

src/app/chatbot/chatbot.scss

@@ -1,133 +1,74 @@
-/* General Container */
-.chatbot-container {
-  max-width: 400px;
-  margin: 0 auto;
-  padding: 20px;
-  border-radius: 15px;
-  background-color: #f4f7fc;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  font-family: 'Arial', sans-serif;
+/* src/app/llama-demo/llama-demo.component.css */
+.card {
+  max-width: 860px;
+  margin: 24px auto;
+  padding: 16px;
+  border-radius: 12px;
+  background: #111;
+  color: #eee;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
 }
 
-/* Chatbox Container */
-.chatbox {
-  max-height: 300px;
-  overflow-y: auto;
-  margin-bottom: 20px;
-  padding-right: 10px;
-  border-bottom: 2px solid #dcdfe6;
-  padding-left: 15px;
-  background: #fff;
-  border-radius: 10px;
-}
-
-/* Individual Message Styling */
-.message {
-  margin-bottom: 15px;
+.field {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  margin-bottom: 12px;
 }
 
-.user-message {
-  background-color: #e0f7fa;
-  padding: 8px 12px;
-  border-radius: 10px;
-  margin-bottom: 5px;
-  max-width: 80%;
-  align-self: flex-start;
-  font-size: 14px;
-  color: #00796b;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  animation: fadeIn 0.5s ease;
+.field > label {
+  font-size: 0.9rem;
+  opacity: 0.9;
+  margin-bottom: 4px;
 }
 
-.bot-response {
-  background-color: #e8f5e9;
-  padding: 8px 12px;
-  border-radius: 10px;
-  max-width: 80%;
-  align-self: flex-end;
-  font-size: 14px;
-  color: #388e3c;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  animation: fadeIn 0.5s ease;
+textarea, input {
+  background: #181818;
+  color: #f0f0f0;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  padding: 10px;
 }
 
-/* Input Box Styling */
-input {
-  width: 80%;
-  padding: 12px;
-  font-size: 14px;
-  border-radius: 25px;
-  border: 1px solid #ccc;
-  margin-right: 10px;
-  background-color: #ffffff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+.row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin: 12px 0;
 }
 
 button {
-  padding: 12px;
-  font-size: 14px;
-  background-color: #00796b;
-  color: white;
+  padding: 10px 16px;
+  border-radius: 8px;
   border: none;
-  border-radius: 25px;
+  color: #0b0b0b;
+  background: #a6ff00; /* subtle neon green accent */
   cursor: pointer;
-  transition: all 0.3s;
 }
 
-button:hover {
-  background-color: #004d40;
-  transform: scale(1.05);
+button[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
-button:focus {
-  outline: none;
+.status {
+  margin-top: 12px;
+  opacity: 0.9;
 }
 
-/* Scrollbar Styling */
-.chatbox::-webkit-scrollbar {
-  width: 8px;
+.error {
+  margin-top: 12px;
+  color: #ff8080;
 }
 
-.chatbox::-webkit-scrollbar-thumb {
-  background-color: #00796b;
-  border-radius: 10px;
-}
-
-.chatbox::-webkit-scrollbar-track {
-  background-color: #f4f7fc;
-}
-
-/* Loading Spinner */
-.loader {
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #00796b;
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  animation: spin 1s linear infinite;
-  margin: 0 auto;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+.output {
+  margin-top: 16px;
+  background: #0d0d0d;
+  border: 1px solid #242424;
+  border-radius: 8px;
+  padding: 12px;
 }
 
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
+pre {
+  white-space: pre-wrap;
+  word-break: break-word;
 }

src/app/chatbot/chatbot.ts

@@ -2,54 +2,63 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import axios from 'axios';
+import { FormBuilder, Validators } from '@angular/forms';
+import { LlamaService, GenerateResponse } from './llama.service';
+import { ReactiveFormsModule } from '@angular/forms';
+
 
 @Component({
   selector: 'app-chatbot',
   standalone: true,
-  imports: [FormsModule],
+  imports: [CommonModule,ReactiveFormsModule,FormsModule],
   templateUrl: './chatbot.html',
   styleUrl: './chatbot.scss'
 })
 export class Chatbot {
-  userQuestion: string = '';   // Holds the user's question
-  chatbotAnswer: string = '';  // Holds the chatbot's answer
-
-  // Define messages array to store conversation
-  messages: { user: string, bot: string }[] = [];  // This is the missing property
-
-  private readonly baseUrl =
-    location.hostname.endsWith('hf.space')
-      ? 'https://pykara-pytrade-backend.hf.space'
-      : 'http://127.0.0.1:5000';   // change to 5400 if your local backend uses that port
-
-  // Handle user input and make API call to backend
-  async getChatbotResponse() {
-    if (this.userQuestion.trim()) {
-      // Add user's question to the messages array
-      this.messages.push({ user: this.userQuestion, bot: '...' });
+  isLoading = false;
+  errorMsg = '';
+  resultText = '';
+  form: any;
+  
 
-      try {
-        // Make API call to backend for the answer
-        const response = await axios.post(`${this.baseUrl}/ask`, {
-        //const response = await axios.post('https://pykara-pytrade-backend.hf.space/ask', {
-          question: this.userQuestion
-        });
+  constructor(private fb: FormBuilder, private llama: LlamaService) {
+    this.form = this.fb.group({
+      prompt: ['', [Validators.required]],
+      max_tokens: [256],
+      temperature: [0.7],
+      top_p: [0.95],
+      repeat_penalty: [1.1]
+    });
+  }
 
-        // Get the answer from the response and update the chatbot response
-        this.chatbotAnswer = response.data.answer;
+  onGenerate() {
+    this.errorMsg = '';
+    this.resultText = '';
+    if (this.form.invalid) {
+      this.errorMsg = 'Please enter a prompt.';
+      return;
+    }
 
-        // Add the chatbot's answer to the messages array
-        this.messages[this.messages.length - 1].bot = this.chatbotAnswer;
+    this.isLoading = true;
 
-        // Clear the user question input
-        this.userQuestion = '';
+    const body = {
+      prompt: this.form.value.prompt ?? '',
+      max_tokens: Number(this.form.value.max_tokens ?? 256),
+      temperature: Number(this.form.value.temperature ?? 0.7),
+      top_p: Number(this.form.value.top_p ?? 0.95),
+      repeat_penalty: Number(this.form.value.repeat_penalty ?? 1.1),
+      stop: ['[USER]'] // optional
+    };
 
-      } catch (error) {
-        console.error('Error while getting response from chatbot API:', error);
-        // Handle error gracefully by adding an error message in the conversation
-        this.messages.push({ user: this.userQuestion, bot: 'Sorry, I am unable to get an answer right now.' });
-        this.userQuestion = '';
+    this.llama.generate(body).subscribe({
+      next: (res: GenerateResponse) => {
+        this.resultText = res.output || '';
+        this.isLoading = false;
+      },
+      error: (err: Error) => {
+        this.errorMsg = err.message || 'Request failed';
+        this.isLoading = false;
       }
-    }
+    });
   }
 }

src/app/chatbot/llama.service.ts

@@ -0,0 +1,51 @@
+// src/app/services/llama.service.ts
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
+
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+export interface GenerateRequest {
+  prompt: string;
+  max_tokens?: number;
+  temperature?: number;
+  top_p?: number;
+  repeat_penalty?: number;
+  stop?: string[];
+  system?: string;
+}
+
+export interface GenerateResponse {
+  output: string;
+  usage?: any;
+  model?: string;
+  params?: any;
+}
+
+@Injectable({ providedIn: 'root' })
+export class LlamaService {
+  private base = "http://127.0.0.1:5000";
+
+  constructor(private http: HttpClient) { }
+
+  generate(body: GenerateRequest): Observable<GenerateResponse> {
+    const url = `${this.base}/generate`;
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+    return this.http.post<GenerateResponse>(url, body, { headers })
+      .pipe(catchError(this.handleError));
+  }
+
+  // Optional: Streaming with SSE (requires a streaming endpoint in Flask; see section 5)
+  generateStream(prompt: string): EventSource {
+    const url = `${this.base}/generate_stream?prompt=${encodeURIComponent(prompt)}`;
+    const es = new EventSource(url);
+    return es;
+  }
+
+  private handleError(err: HttpErrorResponse) {
+    if (err.error instanceof ErrorEvent) {
+      return throwError(() => new Error(`Client error: ${err.error.message}`));
+    }
+    return throwError(() => new Error(`Server error ${err.status}: ${err.message}`));
+  }
+}

src/app/toolspage/toolspage.component.ts

@@ -156,6 +156,7 @@ export class ToolspageComponent {
           );
       })
     );
+    console.log(this.filteredCompanies$);
   }
 
   // ---------- Search selection ----------