Add support for Audio Resource

README.md

@@ -1,6 +1,6 @@
 # Chatwire
 
-Chatwire is a clone of ChatGPT made with Laravel Breeze using Livewire and the OpenAI PHP client.
+Chatwire is a clone of ChatGPT made with Laravel Breeze using Livewire and the OpenAI PHP client (Chat and Audio Resource).
 
 ## Description
 
@@ -10,11 +10,14 @@ In this project, we have a Laravel 10 Breeze with Livewire, a login session, and
 
 Chatwire is a Laravel-based project that calls OpenAI's API and displays the responses in Laravel Breeze Dashboard using Livewire. When you finish your ChatBot conversation, you can send it in your email or save it for future use. You can see your saved conversations on the dashboard page using pagination.
 
+Now, you can upload your audio files to create transcription using Audio Resource of OpenAI.
+
 ## Features
 
 #### Model Configuration
 
 -   All ChatGPT Models (GPT-4)
+-   Audio Resource using Whisper Model
 -   Custom System Instruction
 -   Temperature Control
 -   Maximum Token Control
@@ -71,13 +74,14 @@ To run Chatwire locally, follow these steps:
    ![App Screenshot](https://i.imgur.com/Vh0SJuy.png)
 6. Run `php artisan key:generate`
 7. Run `php artisan migrate`
-8. Run `npm install`
-9. Run `npm run build`
-10. Run `php artisan serve`
-11. Add the following line to your cronjobs:
+8. Run `php artisan storage:link`
+9. Run `npm install`
+10. Run `npm run build`
+11. Run `php artisan serve`
+12. Add the following line to your cronjobs:
     `* * * * * cd /path-to-your-project && php artisan schedule:run >> /dev/null 2>&1`
     The above will be used for the email queue job that it is used for sending the emails
-12. Open the link: http://127.0.0.1:8000
+13. Open the link: http://127.0.0.1:8000
 
 ## Usage
 
@@ -86,6 +90,7 @@ To use Chatwire, follow these steps:
 1. Start a conversation with the chatbot on the dashboard page.
 2. When you finish the conversation, you can save it or send it to your email.
 3. You can view your saved conversations on the dashboard page using pagination.
+4. You can upload an audio file and ChatGPT will create the trancription for you.
 
 ## Screenshots
 
@@ -97,6 +102,8 @@ Here are some screenshots of Chatwire in action:
 
 ![App Screenshot](https://i.imgur.com/R7S1phq.png)
 
+![App Screenshot](https://i.imgur.com/GuImTR8.png)
+
 ![App Screenshot](https://i.imgur.com/5UAOF8M.png)
 
 ![App Screenshot](https://i.imgur.com/3ULtQM1.png)

app/Http/Controllers/Auth/NewPasswordController.php

@@ -56,6 +56,6 @@ function ($user) use ($request) {
         return $status == Password::PASSWORD_RESET
                     ? redirect()->route('login')->with('status', __($status))
                     : back()->withInput($request->only('email'))
-                            ->withErrors(['email' => __($status)]);
+                        ->withErrors(['email' => __($status)]);
     }
 }

app/Http/Controllers/Auth/PasswordResetLinkController.php

@@ -39,6 +39,6 @@ public function store(Request $request): RedirectResponse
         return $status == Password::RESET_LINK_SENT
                     ? back()->with('status', __($status))
                     : back()->withInput($request->only('email'))
-                            ->withErrors(['email' => __($status)]);
+                        ->withErrors(['email' => __($status)]);
     }
 }

app/Http/Controllers/WordpressController.php

@@ -4,7 +4,6 @@
 
 class WordpressController extends Controller
 {
-
     public function index()
     {
         return view('wordpress.index');

app/Http/Livewire/ChatBox.php

@@ -2,8 +2,8 @@
 
 namespace App\Http\Livewire;
 
-use App\Services\openAIService;
 use App\Models\ChatBox as ChatBoxModel;
+use App\Services\openAIService;
 use Jantinnerezo\LivewireAlert\LivewireAlert;
 use Livewire\Component;
 
@@ -56,7 +56,7 @@ public function ask()
     {
         $this->transactions[] = ['role' => 'system', 'content' => $this->chatBoxSystemInstruction];
         // If the user has typed something, then asking the ChatGPT API
-        if (!empty($this->message)) {
+        if (! empty($this->message)) {
             $this->transactions[] = ['role' => 'user', 'content' => $this->message];
             $response = $this->openAIService->ask(
                 $this->chatBoxModel,

app/Http/Livewire/TranscribeBox.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use App\Services\openAIService;
+use Livewire\Component;
+use Livewire\WithFileUploads;
+
+class TranscribeBox extends Component
+{
+    use WithFileUploads;
+
+    public $file;
+
+    public $language;
+
+    public $availableLanguages = [
+        'English' => 'en',
+        'German' => 'de',
+        'Greek' => 'el',
+        'Spanish' => 'es',
+        'French' => 'fr',
+        'Italian' => 'it',
+        'Portuguese' => 'pt',
+    ];
+
+    protected $openAIService;
+
+    public $message = [];
+
+    public function boot(openAIService $openAIService)
+    {
+        $this->openAIService = $openAIService;
+    }
+
+    public function transcribe()
+    {
+        $this->validate([
+            'file' => 'required|mimes:mp3,mp4,wav,mpeg,mpga,m4a,webm|max:25000',
+            'language' => 'required',
+        ]);
+        $filePath = $this->file->storeAs($this->file->getClientOriginalName());
+        $response = $this->openAIService->transcribe($filePath, $this->availableLanguages[$this->language]);
+        $this->message = [
+            'duration' => $response->duration,
+            'text' => $response->text,
+        ];
+    }
+
+    public function render()
+    {
+        return view('livewire.transcribe-box.transcribe-box');
+    }
+}

app/Http/Livewire/WordpressCreatePost.php

@@ -55,7 +55,7 @@ public function ask()
     {
         $this->transactions[] = ['role' => 'system', 'content' => $this->chatBoxSystemInstruction];
         // If the user has typed something, then asking the ChatGPT API
-        if (!empty($this->topic)) {
+        if (! empty($this->topic)) {
             $this->transactions[] = ['role' => 'user', 'content' => $this->topic];
             $response = $this->openAIService->ask(
                 $this->chatBoxModel,

app/Http/Livewire/WordpressSeo.php

@@ -2,9 +2,9 @@
 
 namespace App\Http\Livewire;
 
-use Livewire\Component;
 use App\Models\Wordpress as WordpressModel;
 use App\Services\openAIService;
+use Livewire\Component;
 
 class WordpressSeo extends Component
 {
@@ -38,21 +38,22 @@ public function boot(openAIService $openAIService)
     {
         $this->openAIService = $openAIService;
     }
+
     public function load()
     {
         $this->validate([
-            'url' => 'required|url'
+            'url' => 'required|url',
         ]);
         $response = WordpressModel::getPostsPerPage($this->url, 1, 1)[0];
 
-        $this->firstPost = 'title: ' . $response->title->rendered . PHP_EOL . 'body: ' . $response->content->rendered;
+        $this->firstPost = 'title: '.$response->title->rendered.PHP_EOL.'body: '.$response->content->rendered;
     }
 
     public function ask()
     {
         $this->transactions[] = ['role' => 'system', 'content' => $this->chatBoxSystemInstruction];
         // If the user has typed something, then asking the ChatGPT API
-        if (!empty($this->firstPost)) {
+        if (! empty($this->firstPost)) {
             $this->transactions[] = ['role' => 'user', 'content' => $this->firstPost];
             $response = $this->openAIService->ask(
                 $this->chatBoxModel,

app/Models/ChatBox.php

@@ -4,7 +4,6 @@
 
 use Illuminate\Database\Eloquent\Model;
 
-
 class ChatBox extends Model
 {
     protected $table = 'chatboxes';

app/Models/Wordpress.php

@@ -2,10 +2,9 @@
 
 namespace App\Models;
 
+use GuzzleHttp\Client;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
-use GuzzleHttp\Client;
-
 
 class Wordpress extends Model
 {
@@ -17,7 +16,7 @@ public static function getPostsCount($url)
         $client = new Client();
 
         //Get the wordpress posts using the wordpress api
-        $response = $client->request('GET', $url . '/wp-json/wp/v2/posts');
+        $response = $client->request('GET', $url.'/wp-json/wp/v2/posts');
 
         //Get the number of posts
         $totalPosts = $response->getHeader('X-WP-Total')[0];
@@ -32,11 +31,11 @@ public static function getPostsPerPage($url, $page = 1, $perPage = 10)
         $client = new Client();
 
         //Get the wordpress posts using the wordpress api
-        $response = $client->request('GET', $url . '/wp-json/wp/v2/posts', [
+        $response = $client->request('GET', $url.'/wp-json/wp/v2/posts', [
             'query' => [
                 'page' => $page,
-                'per_page' => $perPage
-            ]
+                'per_page' => $perPage,
+            ],
         ]);
 
         //Get the response body
@@ -65,14 +64,15 @@ public static function createPost($url, $title, $body, $status, $username, $pass
 
         //Try to create a new post using the wordpress api
         try {
-            $response = $client->post($url . '/wp-json/wp/v2/posts', [
+            $response = $client->post($url.'/wp-json/wp/v2/posts', [
                 // 'auth' => [$username, $password],
                 'headers' => [
                     'Content-Type' => 'application/json',
-                    'Authorization' => 'Basic ' . base64_encode($username . ':' . $password)
+                    'Authorization' => 'Basic '.base64_encode($username.':'.$password),
                 ],
                 'json' => $payload,
             ]);
+
             return true;
         } catch (\Exception $e) {
             return false;

app/Services/openAIService.php

@@ -5,17 +5,29 @@
 use GuzzleHttp\Client;
 use OpenAI\Laravel\Facades\OpenAI;
 
-
 class openAIService
 {
+    public function transcribe($filePath, $language)
+    {
+        $response = OpenAI::audio()->transcribe([
+            'model' => 'whisper-1',
+            'file' => fopen(storage_path('app/'.$filePath), 'r'),
+            'language' => $language,
+            'response_format' => 'verbose_json',
+        ]);
+
+        return $response;
+    }
+
     public function ask($chatBoxModel, $chatBoxMaxTokens, $chatBoxTemperature, $transactions)
     {
         $response = OpenAI::chat()->create([
             'model' => $chatBoxModel,
             'messages' => $transactions,
-            'max_tokens' => (int)$chatBoxMaxTokens,
+            'max_tokens' => (int) $chatBoxMaxTokens,
             'temperature' => (float) $chatBoxTemperature,
         ]);
+
         return $response;
     }
 

composer.json

@@ -13,7 +13,7 @@
         "laravel/tinker": "^2.8",
         "league/commonmark": "^2.3",
         "livewire/livewire": "^2.12",
-        "openai-php/laravel": "^0.4.0"
+        "openai-php/laravel": "^0.6.3"
     },
     "require-dev": {
         "fakerphp/faker": "^1.9.1",