In this blog post, we’ll explore how to create a ChatGPT-like application using Hyperdiv and Ollama. Hyperdiv provides a flexible framework for building web applications, while Ollama offers powerful local machine learning capabilities.
We will start with the Hyperdiv GPT-chatbot app template and adapt it to leverage Ollama, which runs locally. This guide will walk you through the necessary steps and code changes to integrate these technologies effectively.
Install (Windows) or unpack (macOS) the downloaded file. This gets you an Ollama app (which allows you to start the Ollama service) and a Ollama command line.
Start the Ollama service by starting the Ollama app.
On macOS, you will see an icon for the Ollama Servce at the top bar.
Then, open a terminal and type ollama list. This command displays the install models.
ollama list
To install a model, type
ollama pull llama3
For our ChatGPT Clone, we will use the llama3 model.
Start by cloning or downloading the Hyperdiv GPT-chatbot app. This app provides a basic structure for a chatbot application, which we will modify to work with Ollama.
Go to your desired local folder to store the sources and type
Gradio Gradio is the fastest way to demo your machine learning model with a friendly web interface so that anyone can use it, anywhere!
Streamlit Streamlit turns data scripts into shareable web apps in minutes. All in pure Python. No front‑end experience required.
HyperDiv Open-source framework for rapidly building reactive web apps in Python, with built-in Shoelace components, Markdown, charts, tables, and more.
Shoelace A forward-thinking library of web components.
❯ npm create gatsby
.../21.6.2/pnpm/store/v3/tmp/dlx-42253 | +3 +
.../21.6.2/pnpm/store/v3/tmp/dlx-42253 | Progress: resolved 3, reused 1, downloaded 2, added 3, done
create-gatsby version 3.13.1
Welcome to Gatsby!
What would you like to call your site?
✔ Getting-Started-with-Gatsby/ site
✔ Will you be using JavaScript or TypeScript?
· TypeScript
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· Tailwind CSS
✔ Would you like to install additional features with other plugins?
· Add responsive images
· Add an automatic sitemap
· Generate a manifest file
· Add Markdown and MDX support
Thanks! Here's what we'll now do:
🛠 Create a new Gatsby site in the folder site
🎨 Get you set up to use Tailwind CSS for styling your site
🔌 Install gatsby-plugin-image, gatsby-plugin-sitemap, gatsby-plugin-manifest, gatsby-plugin-mdx
✔ Shall we do this? (Y/n) · Yes
✔ Created site from template
✔ Installed Gatsby
✔ Installed plugins
✔ Created site in site
🔌 Setting-up plugins...
info Adding gatsby-plugin-postcss
info Adding gatsby-plugin-image
info Adding gatsby-plugin-sitemap
info Adding gatsby-plugin-manifest
info Adding gatsby-plugin-mdx
info Adding gatsby-plugin-sharp
info Adding gatsby-transformer-sharp
info Adding gatsby-source-filesystem
info Adding gatsby-source-filesystem
info Installed gatsby-plugin-postcss in gatsby-config
success Adding gatsby-plugin-postcss to gatsby-config - 0.224s
info Installed gatsby-plugin-image in gatsby-config
success Adding gatsby-plugin-image to gatsby-config - 0.221s
info Installed gatsby-plugin-sitemap in gatsby-config
success Adding gatsby-plugin-sitemap to gatsby-config - 0.230s
info Installed gatsby-plugin-manifest in gatsby-config
success Adding gatsby-plugin-manifest to gatsby-config - 0.258s
info Installed gatsby-plugin-mdx in gatsby-config
success Adding gatsby-plugin-mdx to gatsby-config - 0.264s
info Installed gatsby-plugin-sharp in gatsby-config
success Adding gatsby-plugin-sharp to gatsby-config - 0.265s
info Installed gatsby-transformer-sharp in gatsby-config
success Adding gatsby-transformer-sharp to gatsby-config - 0.269s
info Installed gatsby-source-filesystem in gatsby-config
success Adding gatsby-source-filesystem (images) to gatsby-config - 0.279s
info Installed gatsby-source-filesystem in gatsby-config
success Adding gatsby-source-filesystem (pages) to gatsby-config - 0.286s
🎨 Adding necessary styling files...
🎉 Your new Gatsby site Getting Started with Gatsby has been successfully created
at /Users/Shared/CLOUD/Programmier-Workshops/Kurse/Gatsby/Einsteiger/Getting-Started-with-Gatsby/site.
Start by going to the directory with
cd site
Start the local development server with
npm run develop
See all commands at
https://www.gatsbyjs.com/docs/reference/gatsby-cli/
What PHPMD does is: It takes a given PHP source code base and look for several potential problems within that source. These problems can be things like:
Possible bugs
Suboptimal code
Overcomplicated expressions
Unused parameters, methods, properties
PHPMD is a mature project and provides a diverse set of pre defined rules (though may be not as many its Java brother PMD) to detect code smells and possible errors within the analyzed source code. Checkout the rules section to learn more about all implemented rules.
Sick and tired of defending code quality over and over again? GrumPHP will do it for you! This composer plugin will register some git hooks in your package repository. When somebody commits changes, GrumPHP will run some tests on the committed code. If the tests fail, you won’t be able to commit your changes. This handy tool will not only improve your codebase, it will also teach your co-workers to write better code following the best practices you’ve determined as a team.
Ersetzen Sie your-api-project durch den gewünschten Projektnamen.
Schritt 2: Installieren Sie die Swagger-PHP-Bibliothek
Sie benötigen die Swagger-PHP-Bibliothek, um Swagger-Dokumentation zu generieren. Installieren Sie diese mit Composer:
composer require zircote/swagger-php
Schritt 3: Erstellen Sie API-Routen
In Laravel definieren Sie Ihre API-Routen in der Datei routes/api.php. Sie können Routen erstellen, wie Sie es normalerweise für Ihre API tun würden.
routes/api.php
use Illuminate\Support\Facades\Route;
Route::get('/users', 'UserController@index');
Route::post('/users', 'UserController@store');
Route::get('/users/{id}', 'UserController@show');
Schritt 4: Generieren Sie Swagger-Annotationen
In Ihren Controller-Methoden verwenden Sie Swagger-Annotationen, um Ihre API zu dokumentieren. Hier ist ein Beispiel, wie man eine Controller-Methode annotiert:
/**
* @SWG\Get(
* path="/users",
* summary="Holt eine Liste von Benutzern",
* tags={"Users"},
* @SWG\Response(response=200, description="Erfolgreiche Operation"),
* @SWG\Response(response=400, description="Ungültige Anfrage")
* )
*/
public function index()
{
// Ihre API-Logik hier
}
Weitere Informationen zu Swagger-Annotationen finden Sie in der Swagger-PHP-Dokumentation.
Schritt 5: Generieren Sie Swagger-Dokumentation
Nachdem Sie Ihre Controller annotiert haben, müssen Sie die Swagger-Dokumentation generieren. Dies können Sie mit dem artisan Befehl tun, der vom darkaonline/l5-swagger Paket bereitgestellt wird.
Zuerst installieren Sie das Paket:
composer require darkaonline/l5-swagger
Veröffentlichen Sie nun die Swagger-Konfiguration:
Der Code für die in diesem Post erstelle Anwendung liegt hier.
Notwendige Komponenten eines API Backend
Für die Umsetzung eines API Backend benötigen wir in unserer Laravel App mehrere Komponenten:
ein Model, das beschreibt, wir die Daten aussehen, die unsere API verwendet
ein Controller, der den Programmcode beinhaltet, m die einzelnen Aktionen (Create, Read, Update, Delete, ..) auszuführen
weitere Komponenten, um die Nutzung zu erleichern
ein Seeder um die Datenbank mit definierte Werten zu füllen
ein Migrationsskript, um die notwendigen Datenbankeinträge (Tabelle, Spalten) zu erstellen
Testskripte, um unseren Controller und weitere Kompoentne zu prüfen
Hinweis
Vorab ein Hinweis: jeder der nachfolgenden Kommandos erstellen Komponenten in Form von Dateien. Ein erneutes Erstellen wird fehlschlagen, da die entsprechende Datei schon vorhanden ist.
Um mit den verschiedenen Kommandos zu experimentieren, verwenden sie am besten eine Funktionalität von Git, die es ihnen ermöglicht de Status zurückzusetzen, also Dateien zu löschen.
Wenn Sie ein Kommando ausgeführt haben, dann sehen sie im Visual Studio die neu erstellen Dateien:
Selektieren sie die neu erstellten Dateien und wählen sie dann die Option Discard Changes:
Komponenten erstellen
Jede dieser Komponenten kann einzeln erstellt werden, z. B mit
❯ php artisan make:model Post
❯ php artisan make:controller PostController
Hierbei gilt es natürlich, die Abhängigkeiten zu berücksichtigen. Der Controller muss mit dem Model arbeiten und sollte daher die gleichen Felder und Feldnamen verwendet.
Einfacher ist es daher, das Laravel diese Abhängigkeiten kennt und entsprechend verwendet.
Bei der Erstellung des Models können wir auch einen dazu passenden Controller und weitere Komponenten erstellen:
❯ php artisan make:model Post --migration --controller --seed --api --requests --pest
INFO Model and test [app/Models/Post.php] created successfully.
INFO Migration [database/migrations/2024_04_19_073500_create_posts_table.php] created successfully.
INFO Seeder [database/seeders/PostSeeder.php] created successfully.
INFO Request [app/Http/Requests/StorePostRequest.php] created successfully.
INFO Request [app/Http/Requests/UpdatePostRequest.php] created successfully.
INFO Controller and test [app/Http/Controllers/PostController.php] created successfully.
Und um alle möglichen Komponenten zu erstellen, verwenden wir den nachfolgenden Befehl:
❯ php artisan make:model Post --all --pest
INFO Model and test [app/Models/Post.php] created successfully.
INFO Factory [database/factories/PostFactory.php] created successfully.
INFO Migration [database/migrations/2024_04_19_073800_create_posts_table.php] created successfully.
INFO Seeder [database/seeders/PostSeeder.php] created successfully.
INFO Request [app/Http/Requests/StorePostRequest.php] created successfully.
INFO Request [app/Http/Requests/UpdatePostRequest.php] created successfully.
INFO Controller and test [app/Http/Controllers/PostController.php] created successfully.
INFO Policy [app/Policies/PostPolicy.php] created successfully.
❯ php artisan make:model Post --all --pest
INFO Model and test [app/Models/Post.php] created successfully.
INFO Factory [database/factories/PostFactory.php] created successfully.
INFO Migration [database/migrations/2024_04_19_075600_create_posts_table.php] created successfully.
INFO Seeder [database/seeders/PostSeeder.php] created successfully.
INFO Request [app/Http/Requests/StorePostRequest.php] created successfully.
INFO Request [app/Http/Requests/UpdatePostRequest.php] created successfully.
INFO Controller and test [app/Http/Controllers/PostController.php] created successfully.
INFO Policy [app/Policies/PostPolicy.php] created successfully.
Anpassen des Routing
Erweiteren Sie die Datei routes/api.php um den nachfolgenden Programmcode (Zeile 6 und 12-14):
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
Route::get('/user', function (Request $request) {
return $request->user();
})->middleware('auth:sanctum');
Route::get('/post', [PostController::class, 'index']);
Route::post('/post', [PostController::class, 'store']);
Route::delete('/post/{id}', [PostController::class, 'destroy']);
Prüfen wir die von Laravel erkannten Routen:
Erster Test
Prüfen wir die bisherigen Schritte. Starten sie Laravel und öffnen sie einen Browser unter der Adresse http://127.0.0.1:8000/api/post
❯ php artisan serve
INFO Server running on [http://127.0.0.1:8000].
Press Ctrl+C to stop the server
Sie sehen, das sie nichts sehen. Was zu erwarten war, da die API noch keine Daten hat und daher auch keine Daten liefern kann.
Datenbank
Tabelle erstellen
Erweitern wir als nächstes das Migrations-Skript, um die notwendige Tabelle zu erstellen und mit Werten zu füllen.
Für die Operationen GET (Einträge anzeigen), POST (neuen Eintrag erstellen) und DELETE (Eintrag löschen) stehen jeweils eigene URLs zur Verfügung. Am einfachsten ist der Test der URLs mit Postman.
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.