با استفاده از Next.js و OpenAI Text Completion یک پرسش و پاسخ ساده با هوش مصنوعی بسازید

npx create-next-app@latest
# or
yarn create next-app

npx degit codegino/nextjs-tailwind-slim-boilerplate

// src/libs/openai.ts
import {Configuration, OpenAIApi} from 'openai';
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

export const openai = new OpenAIApi(configuration);

// src/pages/api/completion.ts
import {NextApiRequest, NextApiResponse} from 'next';
import {openai} from '../../libs/openai';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const {prompt} = req.body;

  if (req.method !== 'POST') {
    return res.status(400).json({error: 'Invalid request'});
  }

  const response = await openai.createCompletion({
    prompt,
    model: 'text-davinci-003',
    temperature: 0.6,
    max_tokens: 100,
    n: 1,
  });

  return res.status(200).json({
    data: response.data
  });
}

// src/pages/api/completion.ts
import {NextApiRequest, NextApiResponse} from 'next';
import {openai} from '../../libs/openai';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const {prompt} = req.body;

  if (req.method !== 'POST') {
    return res.status(400).json({error: 'Invalid request'});
  }

  const response = await openai.createCompletion({
    prompt,
    model: 'text-davinci-003',
    temperature: 0.6,
    max_tokens: 100,
    n: 1,
  });

-  return res.status(200).json({
-    data: response.data
-  });

+  const firstResponse = response.data.choices[0];

+  return res.status(200).json({
+    data: {
+      ...firstResponse,
+      text: firstResponse.text.replace(/^\n+/, ''),
+    },
+  });
}

// src/pages/index.tsx
const [prompt, setPrompt] = useState('');
const [response, setResponse] = useState('');

// src/pages/index.tsx
const handleSubmit = async e => {
  e.preventDefault();

  const res = await fetch('/api/completion', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({prompt: prompt.trim()}),
  }).then(res => res.json());

  setResponse(res.data.text);

// src/pages/index.tsx
return (
  <div className="max-w-md mx-auto pt-20">
    <h1 className="text-3xl font-bold text-center mb-6 bg-white">Ask Me Anything!</h1>
    <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
      <div className="mb-4">
        <label htmlFor="prompt" className="block text-gray-700 text-sm font-bold mb-2">
          What do you want to know?
        </label>
        <input id="prompt" type="text" name="prompt" value={prompt} autoComplete="off"
          onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
          className="shadow border rounded w-full py-2 px-3 text-gray-700"
        />
      </div>
      <div className="flex gap-2">
        <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
          Ask
        </button>
      </div>
    </form>
  </div>
);

// src/pages/index.tsx
return (
  <div className="max-w-md mx-auto pt-20">
    <h1 className="text-3xl font-bold text-center mb-6 bg-white">Ask Me Anything!</h1>
    <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
      <div className="mb-4">
        <label htmlFor="prompt" className="block text-gray-700 text-sm font-bold mb-2">
          What do you want to know?
        </label>
        <input id="prompt" type="text" name="prompt" value={prompt} autoComplete="off"
          onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
          className="shadow border rounded w-full py-2 px-3 text-gray-700"
        />
      </div>
+      {response && (
+        <div className="mb-4">
+          <h2 className="font-bold">Response</h2>
+          <p className="pl-2 text-gray-700 whitespace-pre-line">{response}</p>
+        </div>
+      )}
      <div className="flex gap-2">
        <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
          Ask
        </button>
      </div>
    </form>
  </div>
);

// src/styles/tailwind
body {
  background-image: radial-gradient(blue 0.1px, transparent 0.5px);
  background-size: 10px 10px;
}

// src/pages/index.tsx
import {useState} from 'react';

const IndexPage = () => {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async e => {
    e.preventDefault();

    const res = await fetch('/api/completion', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({prompt: prompt.trim()}),
    }).then(res => res.json());

    setResponse(res.data.text);
  };

  return (
    <div className="max-w-md mx-auto pt-20">
      <h1 className="text-3xl font-bold text-center mb-6 bg-white">Ask Me Anything!</h1>
      <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
        <div className="mb-4">
          <label htmlFor="prompt" className="block text-gray-700 text-sm font-bold mb-2">
            What do you want to know?
          </label>
          <input id="prompt" type="text" name="prompt" value={prompt} autoComplete="off"
            onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
            className="shadow border rounded w-full py-2 px-3 text-gray-700"
          />
        </div>
        {response && (
          <div className="mb-4">
            <h2 className="font-bold">Response</h2>
            <p className="pl-2 text-gray-700 whitespace-pre-line">{response}</p>
          </div>
        )}
        <div className="flex gap-2">
          <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
            Ask
          </button>
        </div>
      </form>
    </div>
  );
};

export default IndexPage;

// src/pages/index.tsx
import {useState} from 'react';

const IndexPage = () => {
  const [response, setResponse] = useState('');
  const [prompt, setPrompt] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async e => {
    e.preventDefault();

    setLoading(true);
    setResponse('');

    const res = await fetch('/api/completion', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({prompt: prompt.trim()}),
    }).then(res => res.json());

    setResponse(res.data.text);
    setLoading(false);
  };

  const handleTryAgain = () => {
    setResponse('');
    setPrompt('');
  };

  return (
    <div className="max-w-md mx-auto pt-20">
      <h1 className="text-3xl font-bold text-center mb-6 bg-white">
        Ask Me Anything!
      </h1>
      <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
        <div className="mb-4">
          <label
            className="block text-gray-700 text-sm font-bold mb-2"
            htmlFor="prompt"
          >
            What do you want to know?
          </label>
          <input id="prompt" type="text" name="prompt" value={prompt}
            onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
            autoComplete="off" disabled={!!response || loading}
            className="shadow border rounded w-full py-2 px-3 text-gray-700"
          />
        </div>
        {response && (
          <div className="mb-4">
            <h2 className="font-bold">Response</h2>
            <p className="pl-2 text-gray-700 whitespace-pre-line">{response}</p>
          </div>
        )}
        <div className="flex gap-2">
          {response ? (
            <button
              onClick={handleTryAgain}
              className="bg-blue-500 text-white font-bold py-2 px-4 rounded"
            >
              Try again
            </button>
          ) : (
            <button
              type="submit"
              disabled={!!loading || prompt.length < 5}
              className="bg-blue-500 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
            >
              {loading ? 'Thinking...' : 'Ask'}
            </button>
          )}
        </div>
      </form>
    </div>
  );
};

export default IndexPage;