Skip to content

Commit e0fc5c9

Browse files
A-NajmabadiA-Najmabadi
committed
docs: update ai/cookbook/nextjs
1 parent 2b01e90 commit e0fc5c9

File tree

8 files changed

+1163
-3
lines changed

8 files changed

+1163
-3
lines changed

‎src/components/Sidebar/data.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -527,6 +527,26 @@ export default {
527527
title: "استریم متن با ورودی",
528528
link: "/ai/cookbook/nextjs/stream-text-with-chat-prompt"
529529
},
530+
{
531+
title: "استریم متن با ورودی عکس",
532+
link: "/ai/cookbook/nextjs/stream-text-with-image-prompt"
533+
},
534+
{
535+
title: "استریم متن Multi-Step",
536+
link: "/ai/cookbook/nextjs/stream-text-multistep"
537+
},
538+
{
539+
title: "چت‌بات مبتنی بر Markdown",
540+
link: "/ai/cookbook/nextjs/markdown-chatbot-with-memoization"
541+
},
542+
{
543+
title: "تولید object",
544+
link: "/ai/cookbook/nextjs/generate-object"
545+
},
546+
{
547+
title: "استریم object",
548+
link: "/ai/cookbook/nextjs/stream-object"
549+
},
530550
],
531551

532552
'ai-sdk-core': [

‎src/pages/ai/cookbook/nextjs/generate-object.mdx‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
import Layout from "@/components/Layout";
2+
import Button from "@/components/Common/button";
3+
import Section from "@/components/Common/section";
4+
import Alert from "@/components/Common/alert";
5+
import ThemePlatformIcon from "@/components/Common/themeIcons"
6+
import Tabs from "@/components/Common/tab";
7+
import Step from "@/components/Common/step";
8+
import Card from "@/components/Common/card";
9+
import Important from "@/components/Common/important";
10+
import Highlight from "@/components/Common/highlight";
11+
import Link from "next/link";
12+
import PlatformIcon from "@/components/Common/icons";
13+
import HighlightTabs from "@/components/Common/HighlightTabs";
14+
import IconContainer from "@/components/Common/IconContainer";
15+
import {
16+
GoContainer,
17+
GoDatabase,
18+
GoRocket,
19+
GoServer,
20+
GoMail,
21+
GoGlobe,
22+
GoArrowLeft,
23+
GoTelescope,
24+
} from "react-icons/go";
25+
26+
import Head from "next/head";
27+
28+
<Layout>
29+
<Head>
30+
<title>مستندات تولید آبجکت با AI در NextJS - لیارا</title>
31+
<meta property="og:title" content="مستندات خدمات رایانش ابری لیارا" />
32+
<meta property="og:description" content="مستندات مربوط به آشنایی با نحوه تولید object یا آبجکت (شی) با استفاده از سرویس هوش مصنوعی لیارا و فریم‌ورک NextJS" />
33+
<meta property="og:image" content="https://media.liara.ir/logos/liara-poster.jpg" />
34+
</Head>
35+
36+
37+
# تولید آبجکت با AI در NextJS
38+
<hr className="mb-2" />
39+
40+
توابعی مانند <Important>generateText</Important> و <Important>streamText</Important> امکان تولید متن بدون ساختار را فراهم می‌کنند.
41+
اما اگر بخواهید داده‌های ساختاریافته مانند <Important>JSON</Important> تولید کنید، می‌توانید با استفاده از تابع <Important>generateObject</Important> و ارائه‌ی یک طرح‌واره (schema)، ساختار object مورد نظر را مشخص نمایید.
42+
43+
<div className="h-2" />
44+
این تابع نیاز دارد که اسکیما را با استفاده از کتابخانه‌ی <a href="https://zod.dev" className="text-[#2196f3]">Zod</a> تعریف کنید؛ Zod کتابخانه‌ای برای تعریف و اعتبارسنجی ساختار objectها در جاوااسکریپت است.
45+
با استفاده از Zod نه‌تنها می‌توانید ساختار مورد انتظار را مشخص کنید، بلکه امکان validation آبجکت تولیدشده نیز وجود دارد تا مطمئن شوید که با ساختار تعریف‌شده مطابقت دارد.
46+
47+
<hr className="mb-2" />
48+
<Section id='client' title='کلاینت' />
49+
50+
بیایید یک کامپوننت ساده‌ی React ایجاد کنیم که هنگام کلیک روی یک دکمه، یک درخواست POST به endpoint به نام <Important>api/completion/</Important> ارسال می‌کند.
51+
این endpoint، یک object ساختاریافته را بر اساس پرامپت ورودی تولید کرده و آن را بازمی‌گرداند.
52+
ما نیز پس از دریافت پاسخ، object تولیدشده را در رابط کاربری نمایش خواهیم داد.
53+
در فایل <Important>app/page.tsx</Important> قطعه کد زیر را قرار دهید:
54+
55+
<div className="h-2" />
56+
<div dir='ltr'>
57+
<Highlight className="js">
58+
{`'use client';
59+
60+
import { useState } from 'react';
61+
62+
export default function Page() {
63+
const [generation, setGeneration] = useState();
64+
const [isLoading, setIsLoading] = useState(false);
65+
66+
return (
67+
<div>
68+
<div
69+
onClick={async () => {
70+
setIsLoading(true);
71+
72+
await fetch('/api/completion', {
73+
method: 'POST',
74+
body: JSON.stringify({
75+
prompt: 'Messages during finals week.',
76+
}),
77+
}).then(response => {
78+
response.json().then(json => {
79+
setGeneration(json.notifications);
80+
setIsLoading(false);
81+
});
82+
});
83+
}}
84+
>
85+
Generate
86+
</div>
87+
88+
{isLoading ? 'Loading...' : <pre>{JSON.stringify(generation)}</pre>}
89+
</div>
90+
);
91+
}`}
92+
</Highlight>
93+
</div>
94+
95+
<hr className="mb-2" />
96+
<Section id='server' title='سرور' />
97+
98+
99+
بیایید یک route handler برای <Important>api/completion/</Important> ایجاد کنیم که بر اساس پرامپت ورودی، یک object ساختاریافته تولید کند.
100+
این route، تابع <Important>generateObject</Important> از ماژول <Important>ai</Important> را فراخوانی می‌کند.
101+
این تابع با استفاده از پرامپت ورودی، یک آبجکت تولید کرده و آن را به‌عنوان پاسخ بازمی‌گرداند.
102+
در مسیر <Important>app/api/completion/route.ts</Important>، قطعه کد زیر را قرار دهید:
103+
104+
105+
<div className="h-2" />
106+
<div dir='ltr'>
107+
<Highlight className="js">
108+
{`// npm i ai @ai-sdk/openai zod
109+
110+
import { createOpenAI } from '@ai-sdk/openai';
111+
import { generateObject } from 'ai';
112+
import { z } from 'zod';
113+
114+
const my_model = createOpenAI({
115+
baseURL: process.env.BASE_URL!,
116+
apiKey: process.env.LIARA_API_KEY!,
117+
});
118+
119+
export async function POST(req: Request) {
120+
const { prompt }: { prompt: string } = await req.json();
121+
122+
const result = await generateObject({
123+
model: my_model('openai/gpt-4o-mini', { structuredOutputs: true }),
124+
system: 'You generate three notifications for a messages app.',
125+
prompt,
126+
schema: z.object({
127+
notifications: z.array(
128+
z.object({
129+
name: z.string().describe('Name of a fictional person.'),
130+
message: z.string().describe('Do not use emojis or links.'),
131+
minutesAgo: z.number(),
132+
}),
133+
),
134+
}),
135+
});
136+
137+
return result.toJsonResponse();
138+
}`}
139+
</Highlight>
140+
</div>
141+
<div className="h-2" />
142+
143+
<Alert variant="info">
144+
<p>
145+
متغیرهای محیطی <Important>BASE_URL</Important> و <Important>LIARA_API_KEY</Important> همان baseUrl <a href="https://liara.ir/products/ai/" className="text-[#2196f3]">سرویس هوش مصنوعی لیارا</a> و <a href="/references/api/about/#api-access-key" className="text-[#2196f3]">کلید API لیارا</a> هستند که باید در بخش متغیرهای محیطی برنامه خود، آن‌ها را تنظیم کنید.
146+
</p>
147+
</Alert>
148+
<div className="h-2" />
149+
{/*
150+
خروجی برنامه فوق:
151+
152+
<div className="h-2" />
153+
<img src="https://media.liara.ir/ai/ai-sdk/cookbook/nextjs/generate-text-with-chat-prompt.png" alt="example of generating text with chat prompt in nextjs app router"/>
154+
<div className="h-2" /> */}
155+
156+
<Alert variant="success">
157+
<p>
158+
پروژه فوق را می‌توانید به‌صورت کامل در <a href="https://github.com/liara-cloud/ai-sdk-examples/tree/master/NextJS/generate-object" className="text-[#2196f3]">گیت‌هاب لیارا</a>، مشاهده کنید.
159+
</p>
160+
</Alert>
161+
162+
{/*
163+
164+
<Important>
165+
</Important>
166+
<hr className="mb-2" />
167+
<Section id='' title='' />
168+
<div className="h-2" />
169+
<ul>
170+
<li></li>
171+
</ul>
172+
<div className="h-2" />
173+
<div dir='ltr'>
174+
<Highlight className="js">
175+
{``}
176+
</Highlight>
177+
</div>
178+
<div className="h-2" />
179+
180+
<div className="h-2" />
181+
<img src="https://media.liara.ir/" alt=""/>
182+
<div className="h-2" />
183+
184+
185+
<video
186+
src="https://media.liara.ir/"
187+
controls="controls"
188+
className="block w-full"
189+
width="100%"
190+
/> */}
191+
192+
</Layout>

‎src/pages/ai/cookbook/nextjs/generate-text-with-chat-prompt.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import Head from "next/head";
2929
<Head>
3030
<title>مستندات تولید متن با ورودی با AI در NextJS - لیارا</title>
3131
<meta property="og:title" content="مستندات خدمات رایانش ابری لیارا" />
32-
<meta property="og:description" content="مستندات مربوط به آشنایی با نحوه تولید متن با وردی با استفاده از سرویس هوش مصنوعی لیارا و فریم‌ورک NextJS" />
32+
<meta property="og:description" content="مستندات مربوط به آشنایی با نحوه تولید متن با ورودی با استفاده از سرویس هوش مصنوعی لیارا و فریم‌ورک NextJS" />
3333
<meta property="og:image" content="https://media.liara.ir/logos/liara-poster.jpg" />
3434
</Head>
3535

0 commit comments

Comments
 (0)