handling stream chat feature

Author: ShubhamSupekar

src/main/java/com/example/treaders/LLM/ChatStructure.java

@@ -0,0 +1,31 @@
+package com.example.treaders.LLM;
+
+public class ChatStructure {
+    private String model;
+    private String prompt;
+    private Boolean stream;
+
+    public String getModel() {
+        return model;
+    }
+
+    public void setModel(String model) {
+        this.model = model;
+    }
+
+    public String getPrompt() {
+        return prompt;
+    }
+
+    public void setPrompt(String prompt) {
+        this.prompt = prompt;
+    }
+
+    public Boolean getStream() {
+        return stream;
+    }
+
+    public void setStream(Boolean stream) {
+        this.stream = stream;
+    }
+}

src/main/java/com/example/treaders/LLM/LlamaService.java

@@ -2,20 +2,51 @@
 
 import org.springframework.ai.ollama.OllamaChatClient;
 import org.springframework.stereotype.Service;
-
+import org.springframework.web.reactive.function.BodyInserters;
+import org.springframework.web.reactive.function.client.WebClient;
+import reactor.core.publisher.Flux;
 
 
 @Service
 public class LlamaService {
+    private final WebClient webClient;
+
+    public LlamaService(WebClient.Builder webClientBuilder) {
+        this.webClient = webClientBuilder.baseUrl("http://localhost:11434").build();
+    }
+
+    public Flux<String> getResponse(String prompt) {
+        // Directly embedding the prompt in the JSON request body
+//        String requestBody = "{\"model\": \"llama3\", \"prompt\": \"Introduce yourself in 10 words\", \"stream\": true}";
+        ChatStructure requestBody = new ChatStructure();
+        requestBody.setModel("llama3");
+        requestBody.setPrompt(prompt);
+        requestBody.setStream(true);
 
-    private OllamaChatClient chatClient;
+        Flux<String> responseFlux = webClient.post()
+                .uri("/api/generate")
+                .header("Content-Type", "application/json")
+                .body(BodyInserters.fromValue(requestBody))
+                .retrieve()
+                .bodyToFlux(String.class)
+                .map(this::extractContent)
+                .filter(content -> content != null && !content.isEmpty())
+                .map(content -> content.replaceAll("\\\\n", "\n"));
 
-    public LlamaService(OllamaChatClient chatClient) {
-        this.chatClient = chatClient;
+        return responseFlux;
     }
 
-    public String getResponse(String input) {
-        String response = chatClient.call(input);
-        return response; // Simulated response
+    private String extractContent(String response) {
+        int startIndex = response.indexOf("\"response\":");
+        if (startIndex != -1) { // Check if "content" is found
+            startIndex = response.indexOf("\"", startIndex + "\"response\":".length()); // Find the opening quote after "content"
+            if (startIndex != -1) {
+                int endIndex = response.indexOf("\"", startIndex + 1); // Find the closing quote after content value
+                if (endIndex != -1) {
+                    return response.substring(startIndex + 1, endIndex); // Add 1 to startIndex to remove the opening quote
+                }
+            }
+        }
+        return null; // Return null if content is not found or if the indexes are invalid
     }
 }

src/main/java/com/example/treaders/controller/AllController.java

@@ -122,20 +122,10 @@ public String logout(){
     }
 
     @GetMapping("/chat")
-    public String index(Model model) {
+    public String showChatPage() {
         if(!UserLoggedIn){
             return "redirect:/";
         }
-        model.addAttribute("inputForm", new InputForm());
-        return "ChatPage";
-    }
-
-    @PostMapping("/chat")
-    public String processString(InputForm inputForm,Model model) {
-        String userInput = inputForm.getInputString();
-        String llamaResponse = llamaService.getResponse(userInput); // Get the response from Llama
-        inputForm.setResponseString(llamaResponse); // Set the response in the inputForm
-        model.addAttribute("inputForm", inputForm); // Update the model with the inputForm containing the response
         return "ChatPage";
     }
 

src/main/java/com/example/treaders/controller/AllRestControllers.java

@@ -0,0 +1,21 @@
+package com.example.treaders.controller;
+
+import com.example.treaders.LLM.LlamaService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.MediaType;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import reactor.core.publisher.Flux;
+
+@RestController
+public class AllRestControllers {
+
+    @Autowired
+    private LlamaService llamaService;
+
+    @GetMapping(value = "/stream-chat", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
+    public Flux<String> askQuestion(@RequestParam("question") String question) {
+        return llamaService.getResponse(question);
+    }
+}

src/main/resources/static/css/ChatPage.css

@@ -1,97 +1,108 @@
+/* General body styling */
 body {
     font-family: Arial, sans-serif;
-    background-color: #000; /* Black background */
     margin: 0;
     padding: 0;
-    color: #fff; /* White text */
+    background-color: #222; /* Set page background color to medium black */
+    color: white; /* Set default text color to white */
 }
 
-.container {
-    position: relative; /* Positioning context for absolute positioning */
-    max-width: 600px;
-    margin: 50px auto;
-    padding: 20px;
-    background-color: #1a1a1a; /* Slightly lighter black for container */
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    text-align: center;
-}
-
-h1 {
-    color: #fff; /* White color for the heading */
-    margin-bottom: 20px;
-}
-
-.input-container {
+/* Chat container and box styling */
+#chat-container {
     display: flex;
     justify-content: center;
-    margin-bottom: 20px;
+    align-items: center;
+    height: 100vh; /* Full height of the viewport */
 }
 
-input[type="text"] {
-    width: 70%;
+#chat-box {
+    background-color: black; /* Chat box background color */
+    color: white; /* Text color inside the chat box */
+    padding: 20px;
+    border-radius: 10px;
+    max-width: 600px;
+    width: 100%;
+}
+
+/* Response container styling */
+#response-container {
+    height: 240px; /* Height of the response container */
+    overflow-y: auto; /* Enable scrolling */
+    border: 1px solid #ccc;
     padding: 10px;
-    font-size: 16px;
-    border: none;
-    border-radius: 5px;
-    background-color: #2b2b2b; /* Darker background for the input */
-    color: #fff; /* White text color */
-    margin-right: 10px;
+    margin-bottom: 10px; /* Space between response container and button */
 }
 
-button {
+/* Stop button styling */
+#stop-button {
+    background: linear-gradient(45deg, #ff6b6b, #f06595);
+    border: none;
+    border-radius: 25px;
+    color: white;
     padding: 10px 20px;
     font-size: 16px;
-    border: none;
-    background-color: #444; /* Darker shade for the button */
-    color: #fff; /* White text */
-    border-radius: 5px;
     cursor: pointer;
+    transition: background 0.3s ease, transform 0.2s ease;
 }
 
-button:hover {
-    background-color: #555; /* Slightly lighter on hover */
+#stop-button:hover {
+    background: linear-gradient(45deg, #f06595, #ff6b6b);
+    transform: scale(1.05);
 }
 
-.output-container {
-    max-height: 300px;
-    overflow-y: auto;
-    padding: 15px;
-    border: 1px solid #333; /* Dark border */
-    border-radius: 5px;
-    background-color: #1f1f1f; /* Dark background for the output container */
-    text-align: left;
-    margin-top: 20px;
+#stop-button:focus {
+    outline: none;
+    box-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
+}
+
+/* Form styling */
+#question-form {
+    display: flex;
+    gap: 10px; /* Space between input and button */
+    margin-bottom: 15px; /* Space below the form */
 }
 
-.output-text {
-    white-space: pre-wrap; /* Ensures the text preserves whitespace and line breaks */
-    background-color: #2b2b2b; /* Slightly lighter background for the chat bubble */
-    border: 1px solid #333; /* Dark border for the chat bubble */
+#question-input {
+    flex: 1; /* Take up available space */
     padding: 10px;
+    border: 1px solid #ccc;
     border-radius: 5px;
-    color: #fff; /* White text color */
+    background-color: #333; /* Darker background for the input */
+    color: white; /* Input text color */
 }
 
-.loading-screen {
-    display: none; /* Initially hidden */
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
-    z-index: 9999; /* Ensure it appears above other content */
-    color: #fff; /* White text */
-    font-size: 24px;
-    text-align: center;
-    padding-top: 50vh; /* Center vertically */
+#question-input::placeholder {
+    color: #aaa; /* Placeholder text color */
+}
+
+#question-form button {
+    background: linear-gradient(45deg, #4facfe, #00f2fe);
+    /* Change the background color to a darker shade */
+    background: linear-gradient(45deg, #00688b, #004356);
+    border: none;
+    border-radius: 5px;
+    color: white;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.3s ease, transform 0.2s ease;
+}
+
+#question-form button:hover {
+    /* Change the hover background color to a darker shade */
+    background: linear-gradient(45deg, #004356, #00688b);
+    transform: scale(1.05);
 }
 
+#question-form button:focus {
+    outline: none;
+    box-shadow: 0 0 10px rgba(0, 242, 254, 0.6);
+}
+/* Home button styling */
 .home-button {
     position: absolute;
-    top: 20px; /* Adjust as needed */
-    right: 20px; /* Adjust as needed */
+    top: 150px; /* Adjust as needed */
+    right: 470px; /* Adjust as needed */
     padding: 10px 20px;
     font-size: 16px;
     background-color: #444;

src/main/resources/static/js/ChatPage.js

@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('question-form');
+    const responseContainer = document.getElementById('response-container');
+    const stopButton = document.getElementById('stop-button');
+
+    let eventSource;
+    let completeResponse = '';
+
+    form.addEventListener('submit', function(event) {
+        event.preventDefault(); // Prevent the default form submission
+
+        // Clear any previous responses
+        responseContainer.innerHTML = '';
+        completeResponse = '';
+
+        // Get the user's question from the input field
+        const question = document.getElementById('question-input').value;
+
+        // Close any existing EventSource to avoid multiple open connections
+        if (eventSource) {
+            eventSource.close();
+        }
+
+        // Create a new EventSource to receive streaming responses
+        eventSource = new EventSource(`/stream-chat?question=${encodeURIComponent(question)}`);
+
+        eventSource.onmessage = function(event) {
+            if (event.data === null) {
+                // Close the event source if no more data
+                eventSource.close();
+                return;
+            }
+
+            // Process the received data and replace line breaks with HTML tags
+            let newData = event.data.replace(/\\n/g, '<br>');
+            completeResponse += " " + newData;
+            responseContainer.innerHTML = completeResponse; // Use innerHTML to render HTML tags
+            responseContainer.scrollTop = responseContainer.scrollHeight; // Scroll to the latest message
+        };
+
+        eventSource.onerror = function(event) {
+            console.error("EventSource failed:", event);
+            eventSource.close();
+        };
+    });
+
+    // Handle stopping the stream
+    stopButton.addEventListener('click', function() {
+        if (eventSource) {
+            eventSource.close();
+            responseContainer.innerHTML += '<p>Streaming stopped.</p>';
+        }
+    });
+});