Ajar anda langkah demi langkah cara membina aplikasi rangkaian kecerdasan buatan!-AI-php.cn

Jika anda seperti saya, anda akan perasan ledakan teknologi kecerdasan buatan. Ia akan mengganggu bukan sahaja kejuruteraan perisian, tetapi setiap industri.

Dalam siri ini, kita akan belajar cara mengintegrasikan perkhidmatan AI OpenAI ke dalam aplikasi yang dibina dengan Qwik, rangka kerja JavaScript yang memfokuskan pada konsep kebolehpulihan.

Kita akan membincangkan secara spesifik OpenAI dan Qwik, tetapi saya kebanyakannya akan menumpukan pada pengetahuan am, alatan dan pelaksanaan yang sepatutnya digunakan pada apa jua rangka kerja atau rantai alat yang anda gunakan. Kami akan memberi tumpuan sedekat mungkin pada asas dan saya akan menunjukkan bahagian unik aplikasi.

Pratonton:

Persediaan

Sebelum kita mula membina sesuatu, kita perlu memenuhi beberapa prasyarat. Qwik ialah rangka kerja JavaScript, jadi kami perlu memasang Node.js (dan NPM). Anda boleh memuat turun versi terkini, tetapi apa-apa yang lebih tinggi daripada v16.8 harus berfungsi. Saya akan menggunakan versi 20.

Seterusnya, kami juga memerlukan akaun OpenAI untuk mengakses API mereka.

Pada penghujung siri ini, kami akan menggunakan aplikasi tersebut ke VPS (Virtual Private Server). Tidak kira penyedia yang anda pilih, langkah yang kami ikuti hendaklah sama. Saya akan menggunakan perkhidmatan pengkomputeran awan Akamai (dahulunya Linode).

Menyediakan Apl Qwik

Dengan mengandaikan kita memenuhi prasyarat, kita boleh membuka terminal baris arahan dan menjalankan arahan: npm create qwik@latest<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>npm create qwik@latest. Ini akan menjalankan Qwik CLI yang akan membantu kami bootstrap aplikasi kami.

Contoh:

让我们创建一个 Qwik 应用程序 ✨ (v1.2.7)您想在哪里创建新项目？（使用“.”或“./”表示当前目录）：与在 /home/austin/code/versus 中创建新项目选择启动器：空应用程序您想安装 npm 依赖项吗？是的初始化一个新的git存储库？是的正在完成安装。想听个笑话吗？是的，大花对小花说了什么？嗨，伙计！

Jika semuanya baik-baik saja, buka projek dan mula meneroka.

Dalam folder projek anda akan melihat beberapa fail dan folder penting:

/src<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>/src：包含所有应用业务逻辑
/src/components: Mengandungi semua logik perniagaan aplikasi

/src/components🎜

/src/routes<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>/src/routes：负责Qwik的基于文件的路由；每个文件夹代表一个路由（可以是页面或 API 端点）。要创建页面，请将index.{jsx|tsx}文件放入路线的文件夹中。
/src/root.tsx：该文件导出负责生成 HTML 文档根的根组件。

开始开发

Qwik 使用Vite作为捆绑器，这很方便，因为 Vite 内置了开发服务器。它支持在本地运行我们的应用程序，并在文件更改时更新浏览器。

要启动开发服务器，我们可以在终端中打开项目并执行命令npm run dev。开发服务器运行后，您可以打开浏览器并访问http://localhost:5173: Bertanggungjawab untuk penghalaan berasaskan fail Qwik; setiap folder mewakili laluan (boleh menjadi halaman atau titik akhir API). Untuk membuat halaman, tukar index.{jsx|tsx}

Fail diletakkan dalam folder laluan.

#🎜🎜##🎜🎜#/src/root.tsx#🎜🎜##🎜🎜#: Fail ini mengeksport komponen akar yang bertanggungjawab untuk menjana akar dokumen HTML. #🎜🎜##🎜🎜##🎜🎜#

#🎜🎜#Mulakan pembangunan#🎜🎜#

#🎜🎜#Sebagai pengikat, ini mudah kerana Vite mempunyai pelayan pembangunan terbina dalam. Ia menyokong menjalankan aplikasi kami secara tempatan dan mengemas kini penyemak imbas apabila fail berubah. #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜# Untuk memulakan pelayan pembangunan, kita boleh membuka projek di terminal dan laksanakan arahan #🎜🎜#http://localhost:5173#🎜🎜##🎜🎜# dan anda sepatutnya melihat aplikasi yang sangat asas. #🎜🎜##🎜🎜##🎜🎜##🎜🎜# Setiap kali kami membuat perubahan pada aplikasi kami, kami sepatutnya melihat perubahan tersebut ditunjukkan dalam penyemak imbas hampir serta-merta. #🎜🎜##🎜🎜#

Tambah Gaya

Projek ini tidak terlalu menumpukan pada gaya, jadi jika anda ingin melakukan perkara anda sendiri, bahagian ini adalah pilihan sepenuhnya. Untuk memastikan perkara mudah, saya akan menggunakan Tailwind.

Qwik CLI memudahkan untuk menambah perubahan yang diperlukan dengan melaksanakan perintah terminal<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>npm run qwik add.

Contoh:

您想要添加什么集成？- 适配器：Cloudflare Pages- 适配器：AWS Lambda- 适配器：Azure Static Web Apps- 适配器：Netlify Edge- 适配器：Vercel Edge- 适配器：Google Cloud Run 服务器- 适配器：Deno Server- 适配器： Node.js Express 服务器- 适配器：Node.js Fastify 服务器- 适配器：Node.js 服务器- 适配器：静态站点（.html 文件）- 集成：Builder.io- 集成：Cypress- 集成：Storybook- 集成：Auth.js （身份验证）- 集成：Orama（全文搜索引擎）- 集成：PandaCSS（样式）- 集成：Playwright（E2E 测试）- 集成：PostCSS（样式）- 集成：Prisma（数据库 ORM）- 集成：Styled-Vanilla -提取（样式）-集成：Tailwind（样式）（在 Qwik 应用程序中使用 Tailwind）-集成：Turso（数据库）-集成：Vitest（单元测试）

Anda boleh menggunakan kekunci anak panah untuk beralih ke pemalam Tailwind dan tekan Enter. Ia kemudian akan menunjukkan kepada anda perubahan yang akan dibuat pada pangkalan kod anda dan meminta pengesahan. Selagi ia kelihatan baik, anda boleh menekan Enter semula.

准备好？将 tailwind 添加到您的应用程序？修改- package.json- .vscode/settings.json- src/global.css 创建- postcss.config.js- tailwind.config.js 安装 npm 依赖项：- autoprefixer ^10.4.14- postcss 8.4.27 - tailwindcss 3.3.3准备好将 tailwind 更新应用到您的应用程序了吗？- 是的，看起来不错，完成更新！

Saya juga suka mempunyai tema yang konsisten untuk projek saya, jadi saya menyimpan fail dalam GitHub untuk menyalin dan menampal gaya. Jelas sekali anda boleh mengabaikan langkah ini jika anda mahukan tema anda sendiri, tetapi jika anda mahu projek anda kelihatan menakjubkan seperti projek saya, salin gaya daripada fail ini di GitHub ke dalam fail ini <code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>/src/global.css。您可以替换旧样式，但保留 Tailwind 指令。

准备主页

为了使项目有一个良好的起点，我们今天要做的最后一件事是对主页进行一些更改。我想要做出的更改包括：

删除head/src/global.css. Anda boleh menggantikan gaya lama tetapi mengekalkan arahan Tailwind.
🎜
🎜Padam🎜<li style="box-sizing: border-box; padding: 0px 0px 8px;"><code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb latar belakang-warna: h1 background-color: border-radius:>h1删除除;之外的所有文本请随意添加您自己的页面标题文本。
添加一些 Tailwind 类以将内容居中并使内容h1更大
用标签包裹内容main以使其更具语义
将 Tailwind 类添加到main

Alih keluar semua teks kecuali ; Jangan ragu untuk menambah teks tajuk halaman anda sendiri.

Tambahkan beberapa kelas Tailwind untuk memusatkan kandungan dan menjadikan kandungannya h1

Lebih besar

Balut kandungan dengan tag

<span style="font-family: 宋体, SimSun; font-size: 14px;">utama<p style="box-sizing: border-box; margin-top: 5px; margin-bottom: 15px; padding-top: 0px; color: rgb(34, 38, 53); font-family: Cambria, serif; font-size: 19px; text-wrap: wrap; background-color: rgb(255, 255, 255);"></p></span>

untuk menjadikannya lebih semantik🎜🎜🎜🎜Tukar Tailwind kelas Tambahkan ke 🎜

<img data-fr-image-pasted="true"    style="max-width:90%"  style="max-width:90%" alt="Ajar anda langkah demi langkah cara membina aplikasi rangkaian kecerdasan buatan!" sizes="(max-width: 1080px) 100vw, 1080px" class="fr-fic fr-dib lazyloaded" data-src="https://img.php.cn/" data-srcset="https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89-1080x581.png?quality=100&f=auto 1080w, https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89-480x258.png?quality=100&f=auto 480w, https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89-200x108.png?quality=100&f=auto 200w, https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89-768x413.png?quality=100&f=auto 768w, https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89-1536x827.png?quality=100&f=auto 1536w, https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89.png?quality=100&f=auto 1678w, " srcset="https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89-1080x581.png?quality=100&f=auto 1080w, https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89-480x258.png?quality=100&f=auto 480w, https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89-200x108.png?quality=100&f=auto 200w, https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89-768x413.png?quality=100&f=auto 768w, https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89-1536x827.png?quality=100&f=auto 1536w, https://cdn.statically.io/img/austingil.com/wp-content/uploads//image-89.png?quality=100&f=auto 1678w, " src="https://cdn.statically.io/img/austingil.com/wp-content/uploads/image-89-1080x581.png?quality=100&f=auto" style="box-sizing: border-box; border: 0px; vertical-align: middle; max-width: 100%; height: auto; text-align: center; margin: auto; display: block; float: none !important;"><h2 style="box-sizing: border-box; font-family: " helvetica neue arial sans-serif line-height: color: rgb margin-top: margin-bottom: font-size: clear: both text-wrap: wrap background-color:><span style="box-sizing: border-box; vertical-align: inherit; font-family: 宋体, SimSun; font-size: 14px;">Kesimpulan </span></h2>
<p style="box-sizing: border-box; margin-top: 5px; margin-bottom: 15px; padding-top: 0px; color: rgb(34, 38, 53); font-family: Cambria, serif; font-size: 19px; text-wrap: wrap; background-color: rgb(255, 255, 255);"><span style="box-sizing: border-box; vertical-align: inherit; font-family: 宋体, SimSun; font-size: 14px;">Itu sahaja yang akan kita bincangkan hari ini. Sekali lagi, fokus utama siaran ini adalah untuk menghapuskan kandungan boilerplate supaya siaran seterusnya boleh didedikasikan untuk menyepadukan API OpenAI ke dalam projek kami. </span></p>

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara membina aplikasi rangkaian kecerdasan buatan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!