Feat(SK): Basic Streaming

- Chats can now be streamed on all four AI providers - Need to refactor when I get the time :)
PapaRascal2020 · Sep 17, 2024 · d2387fb · d2387fb
1 parent 6a6adc8
commit d2387fb
Show file tree

Hide file tree

Showing 17 changed files with 314 additions and 85 deletions.
diff --git a/resources/views/sidekick-components/bot.blade.php b/resources/views/sidekick-components/bot.blade.php
@@ -0,0 +1,11 @@
+<svg class="h-5 w-5 text-white"  width="24" height="24" viewBox="0 0 24 24"
+     stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z"/>
+    <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
+    <path d="M4 16v2a2 2 0 0 0 2 2h2" />
+    <path d="M16 4h2a2 2 0 0 1 2 2v2" />
+    <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
+    <line x1="9" y1="10" x2="9.01" y2="10" />
+    <line x1="15" y1="10" x2="15.01" y2="10" />
+    <path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
+</svg>
diff --git a/resources/views/sidekick-components/user.blade.php b/resources/views/sidekick-components/user.blade.php
@@ -0,0 +1,4 @@
+<svg class="h-5 w-5 text-black"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+</svg>
diff --git a/resources/views/sidekick-examples/audio.blade.php b/resources/views/sidekick-examples/audio.blade.php
@@ -12,11 +12,14 @@
             <div class="flex items-start justify-center">
                 <div class="text-gray-300 w-3/4 text-center">
                     <p class="font-bold text-3xl mb-20">&#129302; Audio Generation Sample</p>
-                    <p>Enter text below and click <b class="font-bold">convert</b> to generate an audio file.</p>
+                    <p>Enter text below and click <b class="font-bold">&#x23CE;</b> to generate an audio file.</p>
+
                     @if(isset($audio))
-                        <audio id="audioPlayer" class="w-full pt-20" controls>
-                            <source src="data:audio/mpeg;base64,{!! $audio !!}" />
-                        </audio>
+                        <div class="m-auto text-center w-1/3 pt-4">
+                            <audio id="audioPlayer" controls>
+                                <source src="data:audio/mpeg;base64,{!! $audio !!}" type="audio/mpeg" />
+                            </audio>
+                        </div>
                     @endif
                 </div>
             </div>
@@ -29,7 +32,7 @@
             <div class="flex">
                 @csrf
                 <input type="text" name="text_to_convert" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type your message...">
-                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">Convert</button>
+                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
             </div>
         </form>
     </footer>

diff --git a/resources/views/sidekick-examples/chat.blade.php b/resources/views/sidekick-examples/chat.blade.php
@@ -21,7 +21,7 @@
     <!-- Input Area -->
     <footer class="bg-slate-900 p-4">
             <form method="POST" action="/sidekick/playground/chat">
-                <div class="flex gap-4">
+                <div class="flex gap-2">
                     @csrf
                     <select name="engine" class="text-black">
                         <option value="\PapaRascalDev\Sidekick\Drivers\OpenAi|gpt-3.5-turbo">Open AI : GPT 3.5 Turbo</option>
@@ -41,8 +41,8 @@
                             <option value="\PapaRascalDev\Sidekick\Drivers\Cohere|">Cohere : Auto-Select</option>
                         @endif
                     </select>
-                    <input type="text" name="prompt" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type a system prompt...">
-                    <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">Send</button>
+                    <input type="text" name="prompt" required class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type a system prompt...">
+                    <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
                 </div>
             </form>
     </footer>

diff --git a/resources/views/sidekick-examples/chatroom.blade.php b/resources/views/sidekick-examples/chatroom.blade.php
@@ -6,8 +6,8 @@
 
 @section('content')
     <!-- Header -->
-    <header class="bg-slate-900 shadow p-4 flex justify-between items-center">
-        <h1 class="text-xl text-white font-semibold text-gray-900">Conversation <small class="text-sm">(id: {{$conversationId}}) - Engine: {{($options != '') ? $options : 'Auto-Select'}}</small></h1>
+    <header class="bg-slate-900 shadow p-4 flex justify-between items-center text-white">
+        <h1 class="text-xl text-white font-semibold">Conversation <small class="text-sm">(id: {{$conversationId}}) - Engine: {{($options != '') ? $options : 'Auto-Select'}}</small></h1>
 
         <div>
             <a href="/sidekick/playground/chat" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">New Chat</a>
@@ -26,15 +26,17 @@
                     @if(strtolower($message['role']) === 'user')
                         <div class="flex items-start">
                             <div class="bg-gray-200 p-4 rounded-lg w-3/4">
-                                <p class="text-gray-800 font-bold">&#128583; User</p>
-                                <p class="text-gray-800">{{ $message['content'] }}</p>
+                                <p class="font-bold flex items-center gap-x-1 pb-2 text-black">
+                                    @include('sidekick::sidekick-components.user') User</p>
+                                <p class="text-gray-800">{!! $message['content'] !!}</p>
                             </div>
                         </div>
                     @else
                         <div class="flex items-start justify-end">
-                            <div class="bg-blue-600 text-white p-4 rounded-lg w-3/4">
-                                <p class="font-bold">&#129302; Assistant</p>
-                                <p>{{ $message['content'] }}</p>
+                            <div class="bg-blue-800 text-white p-4 rounded-lg w-3/4">
+                                <p class="font-bold flex items-center gap-x-1 pb-2">
+                                    @include('sidekick::sidekick-components.bot') Assistant</p>
+                                <p>{!! $message['content'] !!}</p>
                             </div>
                         </div>
                     @endif
@@ -50,8 +52,13 @@
             <div class="flex">
                 <input id="conversation_id" type="hidden" name="conversation_id" value="{{$conversationId}}" />
                 <input id="engine" type="hidden" name="engine" value="{{$options}}" />
-                <input id="message-input" type="text" name="message"  class="flex-1 border border-gray-300 text-black rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type your message...">
-                <input type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700" value="Send">
+                <label class="inline-flex items-center cursor-pointer">
+                    <input type="checkbox" id="stream" name="stream" value="" class="sr-only peer">
+                    <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    <span class="ms-3 text-sm font-medium text-gray-900 pr-4 dark:text-gray-300">Stream</span>
+                </label>
+                <input id="message-input" type="text" name="message" required class="flex-1 border border-gray-300 text-black rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type your message...">
+                <input type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700" value="&#x23CE;">
             </div>
         </form>
     </footer>
@@ -65,9 +72,12 @@
             const container = document.getElementById('scrollableDiv');
             const messageInput = document.getElementById('message-input');
             const engine = document.getElementById('engine');
+            const stream = document.getElementById('stream');
             const conversationId = document.getElementById('conversation_id');
             const responseContainer = document.getElementById('response-container');
 
+            container.scrollTop = container.scrollHeight;
+
             form.addEventListener('submit', function (event) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
@@ -76,15 +86,22 @@
                 const message = messageInput.value;
 
                 messageInput.value = "";
+                form.disabled = true;
+
+
+                let isStreamed = stream.checked;
 
                 responseContainer.innerHTML += `
                     <div class="flex items-start">
                         <div class="bg-gray-200 p-4 rounded-lg w-3/4">
-                            <p class="text-gray-800 font-bold">&#128583; User</p>
+                            <p class="font-bold flex items-center gap-x-1 pb-2 text-black">
+                                    @include('sidekick::sidekick-components.user') User</p>
                             <p class="text-gray-800">${message}</p>
                         </div>
                     </div>
+                `;
 
+                responseContainer.innerHTML += `
                     <div id="loader" class="flex items-center justify-center bg-slate-700 text-center text-gray-400 p-4">
                         <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -96,36 +113,106 @@
 
                 container.scrollTop = container.scrollHeight;
 
-                fetch('/sidekick/playground/chat/update', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
-                    },
-                    body: JSON.stringify({ message: message, conversation_id: conversationId.value, engine: engine.value })
-                })
-                    .then(response => response.json())
-                    .then(data => {
+                if (isStreamed) {
+                    handleStreamedCallback();
+                } else {
+                    handleCallback()
+                }
+
+                async function handleStreamedCallback() {
+                    // Set random ID for appending chunked data to Assistant Message
+                    let r = (Math.random() + 1).toString(36).substring(7);
+
+                    // Create response container
+                    responseContainer.innerHTML += `
+                    <div class="flex items-start justify-end">
+                        <div class="bg-blue-800 text-white p-4 rounded-lg w-3/4">
+                            <p class="font-bold flex items-center gap-x-1 pb-2">
+                                @include('sidekick::sidekick-components.bot') Assistant</p>
+                            <p id="response-${r}"></p>
+                        </div>
+                    </div>
+                    `;
+
+                    // Make fetch request to server
+                    fetch('/sidekick/playground/chat/update', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                        },
+                        body: JSON.stringify({
+                            message: message,
+                            conversation_id: conversationId.value,
+                            engine: engine.value,
+                            stream: true
+                        })
+                    }).then(async (response) => {
+                        const reader = response.body.getReader();
+                        const decoder = new TextDecoder();
+
+                        const responseBox = document.getElementById(`response-${r}`);
+
+                        container.scrollTop = container.scrollHeight;
+
+                        while (true) {
+                            const {done, value} = await reader.read();
+
+                            if(done) break;
+
+                            const chunk = decoder.decode(value, {stream: true});
+
+                            responseBox.innerText += chunk;
+                            container.scrollTop = container.scrollHeight;
+                        }
+
+                        const loader = document.getElementById('loader');
+                        loader.remove();
+
+                    }).catch(error => {
                         const loader = document.getElementById('loader');
+                        loader.remove();
+                        console.error('Error:', error);
+                    });
+                }
+
+                function handleCallback() {
+                    fetch('/sidekick/playground/chat/update', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                        },
+                        body: JSON.stringify({
+                            message: message,
+                            conversation_id: conversationId.value,
+                            engine: engine.value,
+                            stream: false
+                        })
+                    }).then(
+                        response => response.json()
+                    ).then(data => {
                         const response = data.response.messages[data.response.messages.length - 1];
 
+                        const loader = document.getElementById('loader');
                         loader.remove();
 
-                        responseContainer.innerHTML += `<div class="flex items-start justify-end">
-                            <div class="bg-blue-600 text-white p-4 rounded-lg w-3/4">
-                                <p class="font-bold">&#129302; Assistant</p>
+                        responseContainer.innerHTML += `
+                        <div class="flex items-start justify-end">
+                            <div class="bg-blue-800 text-white p-4 rounded-lg w-3/4">
+                                <p class="font-bold flex items-center gap-x-1 pb-2">
+                                        @include('sidekick::sidekick-components.bot') Assistant</p>
                                 <p>${response.content}</p>
                             </div>
-                        </div>`;
+                        </div>
+                        `;
 
                         container.scrollTop = container.scrollHeight;
-                    })
-                    .catch(error => {
+                    }).catch(error => {
                         console.error('Error:', error);
-                        //responseText.textContent = 'An error occurred while processing the request.';
-                        //responseContainer.style.display = 'block';
                     });
-            });
+                }
+            })
         });
     </script>
 @endprepend
diff --git a/resources/views/sidekick-examples/completion.blade.php b/resources/views/sidekick-examples/completion.blade.php
@@ -12,7 +12,7 @@
             <div class="flex items-start justify-center">
                 <div class="text-gray-300 w-3/4 text-center">
                     <p class="font-bold text-3xl mb-20">&#129302; Completion Sample</p>
-                    <p>Type some text into the box below and click <strong class="font-bold">Send</strong> to see the AI's response.</p>
+                    <p>Type some text into the box below and click <strong class="font-bold">&#x23CE;</strong> to see the AI's response.</p>
                 </div>
             </div>
 
@@ -30,7 +30,7 @@
         <form id="completion-form">
             <div class="flex">
                 <input type="text" name="message" id="message-input" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type some text...">
-                <input type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700" value="Send">
+                <input type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700" value="&#x23CE;">
             </div>
         </form>
     </footer>

diff --git a/resources/views/sidekick-examples/embedding.blade.php b/resources/views/sidekick-examples/embedding.blade.php
@@ -12,7 +12,7 @@
             <div class="flex items-start justify-center">
                 <div class="text-gray-300 w-3/4 text-center">
                     <p class="font-bold text-3xl mb-20">&#129302; Embedding Generation Sample</p>
-                    <p>Type some text into the box below and click <strong class="font-bold">Embed</strong> to see it's vector representation response.</p>
+                    <p>Type some text into the box below and click <strong class="font-bold">&#x23CE;</strong> to see it's vector representation response.</p>
                 </div>
             </div>
 
@@ -33,7 +33,7 @@
             <div class="flex">
                 @csrf
                 <input type="text" name="text" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type some text..." >
-                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">Embed</button>
+                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
             </div>
         </form>
     </footer>

diff --git a/resources/views/sidekick-examples/image.blade.php b/resources/views/sidekick-examples/image.blade.php
@@ -12,7 +12,7 @@
             <div class="flex items-start justify-center">
                 <div class="text-gray-300 w-3/4 text-center">
                     <p class="font-bold text-3xl mb-20">&#129302; Image Generation Sample</p>
-                    <p>Describe the image you want in the text box below and click <b class="font-bold">convert</b> to generate an image.</p>
+                    <p>Describe the image you want in the text box below and click <b class="font-bold">&#x23CE;</b> to generate an image.</p>
                     @if(isset($image))
                         <img src="{!! $image !!}" alt="generated image" class="w-full pt-20"/>
                     @endif
@@ -27,7 +27,7 @@
             <div class="flex">
                 @csrf
                 <input type="text" name="text_to_convert" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type your message...">
-                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">Convert</button>
+                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
             </div>
         </form>
     </footer>

diff --git a/resources/views/sidekick-examples/moderate.blade.php b/resources/views/sidekick-examples/moderate.blade.php
@@ -12,7 +12,7 @@
             <div class="flex items-start justify-center">
                 <div class="text-gray-300 w-3/4 text-center">
                     <p class="font-bold text-3xl mb-20">&#129302; Moderate Sample</p>
-                    <p>Type a dummy comment or post into the text box below and hit <strong class="font-bold">Send</strong>. The AI will then review the content and send back a moderation response.</p>
+                    <p>Type a dummy comment or post into the text box below and hit <strong class="font-bold">&#x23CE;</strong>. The AI will then review the content and send back a moderation response.</p>
                 </div>
             </div>
 
@@ -40,7 +40,7 @@
             <div class="flex">
                 @csrf
                 <input type="text" name="text" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type some text..." >
-                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">Send</button>
+                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
             </div>
         </form>
     </footer>