From d19b6060b034f37763d0385b4416b8f0d57e75ec Mon Sep 17 00:00:00 2001 From: Ashley Johnson <61059402+PapaRascal2020@users.noreply.github.com> Date: Mon, 2 Sep 2024 23:17:29 +0100 Subject: [PATCH] Refactor(Playground): Updated playground to be more appealing for trying it out. --- .../views/sidekick-examples/audio.blade.php | 59 +++++---- .../views/sidekick-examples/chat.blade.php | 50 ++++--- .../sidekick-examples/chatroom.blade.php | 125 ++++++++---------- .../sidekick-examples/completion.blade.php | 62 ++++++--- .../sidekick-examples/embedding.blade.php | 61 ++++++--- .../views/sidekick-examples/image.blade.php | 55 +++++--- .../views/sidekick-examples/index.blade.php | 44 +++--- .../sidekick-examples/moderate.blade.php | 62 ++++++--- .../sidekick-examples/transcribe.blade.php | 64 +++++---- .../views/sidekick-shared/layout.blade.php | 47 +++++++ 10 files changed, 384 insertions(+), 245 deletions(-) create mode 100644 resources/views/sidekick-shared/layout.blade.php diff --git a/resources/views/sidekick-examples/audio.blade.php b/resources/views/sidekick-examples/audio.blade.php index 990bc17..26cfafc 100644 --- a/resources/views/sidekick-examples/audio.blade.php +++ b/resources/views/sidekick-examples/audio.blade.php @@ -1,24 +1,37 @@ - - - - Sidekick Audio Example - - - - Sidekick Robot - -

Audio Generation Example

-
- @csrf - -
- -
+@extends('sidekick::sidekick-shared.layout') -@if(isset($audio)) - -@endif - - +@section('title') + Audio Generation Sample +@endsection + +@section('content') + + +
+
+
+
+

🤖 Audio Generation Sample

+

Enter text below and click convert to generate an audio file.

+ @if(isset($audio)) + + @endif +
+
+
+
+ + + + +@endsection diff --git a/resources/views/sidekick-examples/chat.blade.php b/resources/views/sidekick-examples/chat.blade.php index 839a696..58cf7c4 100644 --- a/resources/views/sidekick-examples/chat.blade.php +++ b/resources/views/sidekick-examples/chat.blade.php @@ -1,20 +1,32 @@ - - - - Sidekick Chat Example - - - - Sidekick Robot - -

Talk with Sidekick

-

Start a conversation

-
- @csrf - -
- -
- - +@extends('sidekick::sidekick-shared.layout') + +@section('title') + Talk to Sidekick! +@endsection + +@section('content') + + +
+
+
+
+

🤖 Assistant

+

Hi! I am Laravel Sidekick, Just start typing below to start up a conversation with me.

+
+
+
+
+ + + +@endsection diff --git a/resources/views/sidekick-examples/chatroom.blade.php b/resources/views/sidekick-examples/chatroom.blade.php index 85c23a3..1cc5f06 100644 --- a/resources/views/sidekick-examples/chatroom.blade.php +++ b/resources/views/sidekick-examples/chatroom.blade.php @@ -1,73 +1,58 @@ - - - - Sidekick Chatroom - - - - - Sidekick Robot - -

Talk with Sidekick

-

Conversation (id: {{$response['conversation_id']}})

-
- @foreach($response['messages'] as $message) -
-
{{ $message['role'] }}
-

{{ $message['content'] }}

-
- @endforeach -
-
- @csrf - - -
- -
+@extends('sidekick::sidekick-shared.layout') + +@section('title') + Talk to Sidekick! - Chat +@endsection + +@section('content') + +
+

Conversation (id: {{$response['conversation_id']}})

+ New Chat +
+ + +
+
+ @foreach($response['messages'] as $message) + @if($message['role'] === 'user') +
+
+

🙇 User

+

{{ $message['content'] }}

+
+
+ @else +
+
+

🤖 Assistant

+

{{ $message['content'] }}

+
+
+ @endif + @endforeach
- - - - - - + +
+
+
+ @csrf + + + +
+
+
+@endsection + + diff --git a/resources/views/sidekick-examples/completion.blade.php b/resources/views/sidekick-examples/completion.blade.php index 2a46dd4..b59b97b 100644 --- a/resources/views/sidekick-examples/completion.blade.php +++ b/resources/views/sidekick-examples/completion.blade.php @@ -1,24 +1,42 @@ - - - - Sidekick Completion Example - - - - Sidekick Robot - -

Completion Example

-
- @csrf - -
- -
+@extends('sidekick::sidekick-shared.layout') -@if(isset($response)) -

Response

-

{!! json_encode($response) !!}

-@endif - - +@section('title') + Completion Sample +@endsection + +@section('content') + + +
+
+
+
+

🤖 Completion Sample

+

Type some text into the box below and click Send to see the AIs response.

+
+
+ +
+ @if(isset($response)) +
+

Response

+

{!! json_encode($response) !!}

+
+ @endif +
+
+
+ + +
+
+
+ @csrf + + +
+
+
+ +@endsection diff --git a/resources/views/sidekick-examples/embedding.blade.php b/resources/views/sidekick-examples/embedding.blade.php index f2a5e9e..87579ac 100644 --- a/resources/views/sidekick-examples/embedding.blade.php +++ b/resources/views/sidekick-examples/embedding.blade.php @@ -1,24 +1,41 @@ - - - - Sidekick Embedding Example - - - - Sidekick Robot - -

Embedding Example

-
- @csrf - -
- -
+@extends('sidekick::sidekick-shared.layout') -@if(isset($response)) -

Response

-

{!! json_encode($response) !!}

-@endif - - +@section('title') + Embedding Generation Sample +@endsection +@section('content') + + +
+
+
+
+

🤖 Embedding Generation Sample

+

Type some text into the box below and click Embed to see it's vector representation response.

+
+
+ +
+ @if(isset($response)) +
+

Response

+ +
+ @endif +
+
+
+ + +
+
+
+ @csrf + + +
+
+
+ +@endsection diff --git a/resources/views/sidekick-examples/image.blade.php b/resources/views/sidekick-examples/image.blade.php index d0423fd..5fc2d72 100644 --- a/resources/views/sidekick-examples/image.blade.php +++ b/resources/views/sidekick-examples/image.blade.php @@ -1,22 +1,35 @@ - - - - Sidekick Image Example - - - - Sidekick Robot - -

Image Generation Example

-
- @csrf - -
- -
+@extends('sidekick::sidekick-shared.layout') -@if(isset($image)) - generated image -@endif - - +@section('title') + Image Generation Sample +@endsection + +@section('content') + + +
+
+
+
+

🤖 Image Generation Sample

+

Describe the image you want in the text box below and click convert to generate an image.

+ @if(isset($image)) + generated image + @endif +
+
+
+
+ + +
+
+
+ @csrf + + +
+
+
+ +@endsection diff --git a/resources/views/sidekick-examples/index.blade.php b/resources/views/sidekick-examples/index.blade.php index b2edfa3..88eb349 100644 --- a/resources/views/sidekick-examples/index.blade.php +++ b/resources/views/sidekick-examples/index.blade.php @@ -1,25 +1,23 @@ - - - - Sidekick Examples - - - -

Hello from Sidekick!

-Sidekick Robot -

Examples (all use OpenAi())

+@extends('sidekick::sidekick-shared.layout') -

-Chat | Completion | Image | Audio | Transcribe | Moderate | Embedding -

+@section('title') + Welcome to Sidekick Playground +@endsection -

Note: To use this you must have configured the .env with your SIDEKICK_OPENAI_TOKEN.

- - +@section('content') + + +
+
+
+
+

Hello!

+ Sidekick Robot + +

Note: To use this playground you must have configured the .env with your SIDEKICK_OPENAI_TOKEN.

+
+
+
+
+ +@endsection diff --git a/resources/views/sidekick-examples/moderate.blade.php b/resources/views/sidekick-examples/moderate.blade.php index 16d9fd3..ac6d061 100644 --- a/resources/views/sidekick-examples/moderate.blade.php +++ b/resources/views/sidekick-examples/moderate.blade.php @@ -1,24 +1,42 @@ - - - - Sidekick Moderation Example - - - - Sidekick Robot - -

Moderation Example

-
- @csrf - -
- -
+@extends('sidekick::sidekick-shared.layout') -@if(isset($response)) -

Response

-

{!! json_encode($response) !!}

-@endif - - +@section('title') + Moderate Sample +@endsection + +@section('content') + + +
+
+
+
+

🤖 Moderate Sample

+

Type a dummy comment or post into the text box below and hit Send. The AI will then review the content and send back a moderation response.

+
+
+ +
+ @if(isset($response)) +
+

Response

+

{!! json_encode($response) !!}

+
+ @endif +
+
+
+ + +
+
+
+ @csrf + + +
+
+
+ +@endsection diff --git a/resources/views/sidekick-examples/transcribe.blade.php b/resources/views/sidekick-examples/transcribe.blade.php index 6c979e5..dd36b5b 100644 --- a/resources/views/sidekick-examples/transcribe.blade.php +++ b/resources/views/sidekick-examples/transcribe.blade.php @@ -1,25 +1,43 @@ - - - - Sidekick Transcribe Example - - - - Sidekick Robot - -

Transcribe Example

-
- @csrf -

Fot this I am using a url to a sample audio file. An example is already in the box below

- -
- -
+@extends('sidekick::sidekick-shared.layout') -@if(isset($response)) -

Response

-

{!! json_encode($response) !!}

-@endif - - +@section('title') + Transcription Generation Sample +@endsection + +@section('content') + + +
+
+
+
+

🤖 Transcription Generation Sample

+

Enter a URL to an audio file and click convert to generate the transcription (audio to text). + For convenience, Sidekick has added an example URL in case you don't know where to find one.

+
+
+ +
+ @if(isset($response)) +
+

Response

+

{!! json_encode($response) !!}

+
+ @endif +
+
+
+ + +
+
+
+ @csrf + + +
+
+
+ +@endsection diff --git a/resources/views/sidekick-shared/layout.blade.php b/resources/views/sidekick-shared/layout.blade.php new file mode 100644 index 0000000..8a9c6ce --- /dev/null +++ b/resources/views/sidekick-shared/layout.blade.php @@ -0,0 +1,47 @@ + + + + + + + @yield('title') + + + + + +
+ + + + + +
+ + @yield('content') +
+ +
+ + + +