Skip to content

Commit

Permalink
Refactor(Playground): Updated playground to be more appealing for try…
Browse files Browse the repository at this point in the history 
…ing it out.
  • Loading branch information
@PapaRascal2020
PapaRascal2020 committed Sep 2, 2024
1 parent 6b3c035 commit d19b606
Show file tree
Hide file tree
Showing 10 changed files with 384 additions and 245 deletions.
59 changes: 36 additions & 23 deletions resources/views/sidekick-examples/audio.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Sidekick Audio Example</title>
</head>
<body style="padding: 40px; text-align: center; background: #000; color: #fff; font-family: arial, sans-serif;">
<a href="/sidekick/playground" style="border: 0;">
<img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0e3449a7-44de-4ce2-b384-cea763c0901e_500x500.heic" alt="Sidekick Robot" width="100" />
</a>
<h1>Audio Generation Example</h1>
<form method="POST" action="/sidekick/playground/audio">
@csrf
<textarea style="width: 300px; height: 100px;" placeholder="Type the text you want to convert to audio..." name="text_to_convert" required></textarea>
<br>
<input style="width: 300px; height: 50px;" type="submit" value="Convert to Audio" />
</form>
@extends('sidekick::sidekick-shared.layout')

@if(isset($audio))
<audio id="audioPlayer" controls style="padding-top:20px; width:300px;">
<source src="data:audio/mpeg;base64,{!! $audio !!}" />
</audio>
@endif
</body>
</html>
@section('title')
Audio Generation Sample
@endsection

@section('content')

<!-- Chat Messages Area -->
<div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
<div class="space-y-4">
<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>
@if(isset($audio))
<audio id="audioPlayer" class="w-full pt-20" controls>
<source src="data:audio/mpeg;base64,{!! $audio !!}" />
</audio>
@endif
</div>
</div>
</div>
</div>

<!-- Input Area -->
<footer class="bg-slate-900 p-4">
<form method="POST" action="/sidekick/playground/audio">
<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>
</div>
</form>
</footer>

@endsection
50 changes: 31 additions & 19 deletions resources/views/sidekick-examples/chat.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>Sidekick Chat Example</title>
</head>
<body style="padding: 40px; text-align: center; background: #000; color: #fff; font-family: arial, sans-serif;">
<a href="/sidekick/playground" style="border: 0;">
<img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0e3449a7-44de-4ce2-b384-cea763c0901e_500x500.heic" alt="Sidekick Robot" />
</a>
<h1>Talk with Sidekick</h1>
<h3>Start a conversation</h3>
<form method="POST" action="/sidekick/playground/chat">
@csrf
<textarea style="width: 300px; height: 100px;" placeholder="Ask Anything" name="message" required></textarea>
<br>
<input style="width: 300px; height: 50px;" type="submit" value="Start a conversation..." />
</form>
</body>
</html>
@extends('sidekick::sidekick-shared.layout')

@section('title')
Talk to Sidekick!
@endsection

@section('content')

<!-- Chat Messages Area -->
<div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
<div class="space-y-4">
<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; Assistant</p>
<p>Hi! I am Laravel Sidekick, Just start typing below to start up a conversation with me.</p>
</div>
</div>
</div>
</div>

<!-- Input Area -->
<footer class="bg-slate-900 p-4">
<form method="POST" action="/sidekick/playground/chat">
<div class="flex">
@csrf
<input type="text" name="message" 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">Send</button>
</div>
</form>
</footer>
@endsection

125 changes: 55 additions & 70 deletions resources/views/sidekick-examples/chatroom.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title>Sidekick Chatroom</title>
<style type="text/css">
.chatWindow {
border: 1px solid #fff;
height: 600px;
width: 500px;
overflow-y: scroll;
text-align: left;
margin: auto;
margin-bottom: 20px;
}
.chatWindow .user {
padding: 10px;
background: #000;
}
.chatWindow .assistant {
padding: 10px;
background: #222;
}
.chatWindow .assistant h5 {
text-transform: capitalize;
}
.chatWindow .user h5{
text-transform: capitalize;
}
</style>
</head>
<body style="padding: 40px; text-align: center; background: #000; color: #fff; font-family: arial, sans-serif;">
<a href="/sidekick/playground" style="border: 0;">
<img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0e3449a7-44de-4ce2-b384-cea763c0901e_500x500.heic" alt="Sidekick Robot" width="100" />
</a>
<h1>Talk with Sidekick</h1>
<h3>Conversation (id: {{$response['conversation_id']}})</h3>
<div class="chatWindow" id="scrollableDiv">
@foreach($response['messages'] as $message)
<div class="{{ $message['role'] }}">
<h5>{{ $message['role'] }}</h5>
<p>{{ $message['content'] }}</p>
</div>
@endforeach
<div style="padding: 10px; border-radius: 15px;">
<form method="POST" action="/sidekick/playground/chat/update">
@csrf
<input type="hidden" name="conversation_id" value="{{$response['conversation_id']}}" />
<textarea style="width: 100%; height: 60px; background: #888" placeholder="Reply..." name="message" required></textarea>
<br>
<input style="width: 100%; height: 20px;" type="submit" value="Send Response" />
</form>
@extends('sidekick::sidekick-shared.layout')

@section('title')
Talk to Sidekick! - Chat
@endsection

@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 (id: {{$response['conversation_id']}})</h1>
<a href="/sidekick/playground/chat" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">New Chat</a>
</header>

<!-- Chat Messages Area -->
<div id="scrollableDiv" class="bg-slate-700 flex-1 p-6 overflow-y-auto">
<div class="space-y-4">
@foreach($response['messages'] as $message)
@if($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>
</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>
</div>
@endif
@endforeach
</div>
</div>

<script>
function scrollToBottom() {
const container = document.getElementById('scrollableDiv');
container.scrollTop = container.scrollHeight;
}
// Scroll to bottom when the page loads
window.onload = scrollToBottom;
</script>


</body>
</html>

<!-- Input Area -->
<footer class="bg-slate-900 p-4">
<form method="POST" action="/sidekick/playground/chat/update">
<div class="flex">
@csrf
<input type="hidden" name="conversation_id" value="{{$response['conversation_id']}}" />
<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...">
<button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">Send</button>
</div>
</form>
</footer>
@endsection

<script>
function scrollToBottom() {
const container = document.getElementById('scrollableDiv');
container.scrollTop = container.scrollHeight;
}
// Scroll to bottom when the page loads
window.onload = scrollToBottom;
</script>
62 changes: 40 additions & 22 deletions resources/views/sidekick-examples/completion.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Sidekick Completion Example</title>
</head>
<body style="padding: 40px; text-align: center; background: #000; color: #fff; font-family: arial, sans-serif;">
<a href="/sidekick/playground" style="border: 0;">
<img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0e3449a7-44de-4ce2-b384-cea763c0901e_500x500.heic" alt="Sidekick Robot" width="100" />
</a>
<h1>Completion Example</h1>
<form method="POST" action="/sidekick/playground/completion">
@csrf
<textarea style="width: 300px; height: 100px;" placeholder="Ask Anything" name="message" required></textarea>
<br>
<input style="width: 300px; height: 50px;" type="submit" value="Post to Completion Endpoint" />
</form>
@extends('sidekick::sidekick-shared.layout')

@if(isset($response))
<h3>Response</h3>
<p>{!! json_encode($response) !!}</p>
@endif
</body>
</html>
@section('title')
Completion Sample
@endsection

@section('content')

<!-- Chat Messages Area -->
<div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
<div class="space-y-4">
<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 AIs response.</p>
</div>
</div>

<div class="flex items-start justify-center">
@if(isset($response))
<div class="bg-gray-200 p-4 mt-20 rounded-lg w-3/4">
<p class="text-gray-800 font-bold">Response</p>
<p class="text-gray-800">{!! json_encode($response) !!}</p>
</div>
@endif
</div>
</div>
</div>

<!-- Input Area -->
<footer class="bg-slate-900 p-4">
<form method="POST" action="/sidekick/playground/completion">
<div class="flex">
@csrf
<input type="text" name="message" 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>
</div>
</form>
</footer>

@endsection

61 changes: 39 additions & 22 deletions resources/views/sidekick-examples/embedding.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>Sidekick Embedding Example</title>
</head>
<body style="padding: 40px; text-align: center; background: #000; color: #fff; font-family: arial, sans-serif;">
<a href="/sidekick/playground" style="border: 0;">
<img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0e3449a7-44de-4ce2-b384-cea763c0901e_500x500.heic" alt="Sidekick Robot" width="100" />
</a>
<h1>Embedding Example</h1>
<form method="POST" action="/sidekick/playground/embedding">
@csrf
<textarea style="width: 300px; height: 100px;" placeholder="Type some text to generate the vector..." name="text" required></textarea>
<br>
<input style="width: 300px; height: 50px;" type="submit" value="Convert to Embedding" />
</form>
@extends('sidekick::sidekick-shared.layout')

@if(isset($response))
<h3>Response</h3>
<p>{!! json_encode($response) !!}</p>
@endif
</body>
</html>
@section('title')
Embedding Generation Sample
@endsection

@section('content')

<!-- Chat Messages Area -->
<div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
<div class="space-y-4">
<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>
</div>
</div>

<div class="flex items-start justify-center">
@if(isset($response))
<div class="bg-gray-200 p-4 mt-20 rounded-lg w-3/4">
<p class="text-gray-800 font-bold">Response</p>
<textarea class="text-gray-800 bg-gray-200 w-full h-48">{!! json_encode($response) !!}</textarea>
</div>
@endif
</div>
</div>
</div>

<!-- Input Area -->
<footer class="bg-slate-900 p-4">
<form method="POST" action="/sidekick/playground/embedding">
<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>
</div>
</form>
</footer>

@endsection
Loading

0 comments on commit d19b606

Please sign in to comment.