தற்போது வெளியிடப்பெற்றுள்ள Polyfire’s எனும் கட்டற்ற பயன்பாட்டின் குறிக்கோள், சிக்கலின் சுருக்கமான விவரங்கள் எதவும் இல்லாமலும் , எதையும் வரிசைப் படுத்த வேண்டிய அவசியமின்றியும் முன்பக்கத்தில் இரண்டேவரி குறிமுறை வரிகளில் மட்டுமே நாம் விரும்பும் பணிகளை செயல்படுத்திடு வதற்கான ஒவ்வொரு AI கருவியிலும்/Chatbot யிலும் குறிமுறைவரிகள் செய்வதே ஆகும்.
இது AI பயன்பாடுகளுக்கான all-in-one ஆக நிர்வகிக்கப்படுகின்றதொரு பின்புல தளமாகும். அதனால் நாம் நம்முடைய பயன்பாட்டின் பின்புலபணிகள்குறித்து கவலைப்படாமல் இதன்மூலம் முன்பக்க செயலில் மட்டும் கவணம்செலுத்தி AI பயன்பாடுகளை மிக விரைவாக உருவாக்கிபயன்படுத்தி கொள்ளமுடியும்.
ஏன் இந்த Polyfire’s பயன்பாட்டினை பயன்படுத்த வேண்டும்?
இந்த Polyfire’s பயன்பாடு நம்முடைய பணிநேரத்தை மிச்சப்படுத்துகின்றது. இது API உடன் நேரடியாக இணைந்துசெயல்படுவதால், நாம்AIஇன் பின்புலதள சேவைகள் எதையும் அமைக்க வேண்டியதில்லை. மாதிரிகளாக இதனுடய பிற சேவைகளை நம்முடைய முன்பக்கம் அழைப்பதன் மூலம் இதனை பயன்படுத்தி கொள்ளலாம்.
LangChain போன்றவற்றிலிருந்து இது எவ்வாறு வேறுபட்டது?
LangChainஎனும் பயன்பாட்டிற்கு பின்புலதளத்தை அமைக்க வேண்டும். அவை தற்போது அதிகபட்ச ”உருவாக்கதிறன்(composability)’இற்கு சென்றுவிட்டன, அதனால் அவை அனைத்தையும் ஒருங்கிணைக்கின்றன. ஆனால் இதன் விளைவாக, நம்முடைய குறிமுறைவரிகள் விரைவாக சிக்கலானதாகவும் பராமரிப்பதற்கு கடினமாகவும் மாறிவிடுகின்றன. ஆனால் அதற்குபதிலாக இந்த Polyfire’s என்பது நம்முடைய பயன்பாட்டினை முன்பகுதியில் இருந்து நேரடியாக அழைத்துப் பயன்படுத்தி கொள்ளலாம், மேலும் இது மிகஅதிகபட்ச ‘எளிமை’யுடன் செயல்படுகின்றது. அந்த வகையில், தொழில்நுட்பக் கடனைக் குவிப்பதில்லை மிக விரைவாக எதனையும்உருவாக்க வேண்டியதுமில்லை.
OpenAI , பிற APIகளுக்கான விலைப்பட்டி(billing) கையாளப்படுகின்றதா?
ஆம். இது ஆதரிக்கின்ற அனைத்து APIகள், சேவைகளுக்கான விலைபட்டியிலையும்(billing) கையாளுகின்றது. இதனுடைய கணக்கில் கடன்களை மட்டுமே வசூலிக்க வேண்டும், அந்த நிர்வாகி மற்ற வழங்குநர்களுடனான செயல்களை செய்திகளை மறந்துவிடலாம்.
இதில் எதிர்காலத்திற்கு என்ன திட்டமிடப்பட்டுள்ளது?
வாடிக்கையாளர் பக்க அனுபவத்தை இன்னும் சிறப்பாகவும் எளிமையாகவும் மாற்ற திட்டமிடபட்டுள்ளது, AI பயன்பாடுகளை உருவாக்குபவர்கள் பயன்படுத்த விரும்பும் அனைத்து சிறந்த மாதிரிகளையும் சேவைகளையும் ஆதரிக்கின்றவாறு செய்யப்படவுள்ளது, மேலும் Stripe கணக்கு இல்லாமல் கூட மேம்படுத்துநர்கள் தங்கள் பயனர்களிடமிருந்து பணம் செலுத்துவதை மிகவும் எளிதாக்கப்படவுள்ளது.
வாடிக்கையாளர் தரப்பில் எவ்வாறு செயல்படுகிறது?
வாடிக்கையாளர் குறிமுறைவரிகளை (எ.கா. முன்பக்க முனைமம்), ஒரு பயனர் அமர்வை உருவாக்குவது ஒரு உள்நுழைவு (login) போன்றது. பின்னர், இதனுடைய APIக்கான அழைப்புகளை ஏற்புறுதி செய்வதற்காகவும் வரம்பிடுவதற்காகவும், திருப்பிய அமர்வின் நுழைவுச்சீட்டினை இதனுடைய வாடிக்கையாளர் SDK பயன்படுத்திகொள்கிறது. ஏற்கனவே பயன்படுத்தக்கூடிய ஏற்புறுதி வழங்குநர்களுடன் ஒருங்கிணைப்பதற்கான வழிகளில் பணியாற்றிடுகின்றது.
GPT-4 , போன்றபிற செலவுகளுக்கு பணம் செலுத்தப்படுகின்றதா?
இல்லை. கட்டணமற்ற செயல்திட்டத்தில்,வரம்பற்ற LLaMa அழைப்புகளைச் செய்யலாம் அதனோடு மாதத்திற்கு $5 GPT-3.5 கடன்வசதிகளைப் பெறலாம். ஆனால் GPT-4 க்கு, Hacker Planஐ பெற வேண்டும் அல்லது நம்முடைய கணக்கிற்கு API கடன்களை வசூலிக்க வேண்டும்.
இதனை ஒத்த தயாரிப்புகள் அல்லது ஒப்புமைகள் யாவை?
இதுஒரு Firebase போன்றது ஆனால் இது AI பயன்பாடுகளுக்கானது .இது(Firebase)நிர்வகிக்கப்பட்ட பின்புலதளமாகும், Firebase ஆனது அதன் எளிமைக்காக பயன்பாடுகளின் இணையபயன்பாடுகளின் மேம்படுத்துநர்கள் மத்தியில் மிகவும் பிரபலமானது.Polyfire’sஆனது AIபயன்பாடுகளுக்கும் இதையே செய்யவிரும்புகின்றது.
இது எவ்வாறு செயல்படுகிறது?
Polyfire என்பது AI பயன்பாடுகளுக்கான நிர்வகிக்கப்பட்ட பின்புலதளமாகும். இந்த AI பின்புலதளம் “சுருக்கமானது” , அதைப் பற்றி சிந்திக்க வேண்டியதில்லை. AI மாதிரிகள், உட்பொதிவுகள்(LLMகளால் நெறியபடுத்தப்பட்ட தரவு) , திறன் மிகுகட்டளைவரிபகுதிகள், தரவு ஒருங்கிணைப்புகள், கட்டண வரம்புகள், விலைபட்டி ஒருங்கிணைப்புகள் போன்ற பல செயல்களைப் பயன்படுத்த நம்முடைய முன்பக்க குறிமுறைவரிகளில் சில செயலிகளைப் பயன்படுத்தினால் போதும்.
பயனர் பாய்வு பின்வருமாறு: Polyfire ஆனது மேம்படுத்துநரின் பணியகத்தில் ஒரு செயல்திட்டத்தை உருவாக்கிடுக. அதற்காக பின்வருமாறான செயல்முறையை பின்பற்றிடுக.
நம்முடைய முன்பக்க குறிமுறைவரிகளில் Polyfire ஐ துவங்குவதற்காக AI பயன்பாட்டை உருவாக்க குறிமுறைவரிகளில் உள்ள Polyfire SDK செயலிகளை அழைத்திடுக
இந்தபயிற்சியைபின்பற்ற, நமக்கு ஒருவித React App தேவையாகும். இந்த ஆவணங்கள் தற்போது React என்பதில் கவனம் செலுத்துகிறது, எந்தவொரு ஜாவாஸ்கிரிப்ட் முன்பக்க நூலகங்களுக்கும் அடிப்படையான ஜாவாஸ்கிரிப்ட் குறிமுறைவரிகள் செயல்படும் என நினைத்தாலும். டைப்ஸ்கிரிப்ட் மூலம் அடிப்படை React Appஐஅமைக்க,கீழேஉள்ளவாறு கட்டளைவரியை செயல்படுத்திடுக.
npx create-react-app <your_app_name> –template typescript
cd <your_app_name>
npm install polyfire-js
இந்த பயன்பாட்டை இயக்க, npm தொடக்க கட்டளையைப் பயன்படுத்தலாம்.
முன் முனையில் பாலிஃபயரை அமைத்தல்
1. நம்முடைய பயன்பாட்டில் Polyfireஐ உட்செலுத்துதல்
தொடர்ந்து index.tsx இல் அல்லது வாடிக்கையாளர் பக்ககுறிமுறையில், பாலிஃபயர் வழங்குநரைபதிவிறக்கம் செய்து, அதில் பயன்பாட்டை மடித்துஅமைத்திடுக.
import ReactDOM from “react-dom/client”;
import { PolyfireProvider } from “polyfire-js/hooks”;
import “./index.css”;
import App from “./App”;
import reportWebVitals from “./reportWebVitals”;
const root = ReactDOM.createRoot(
document.getElementById(“root”) as HTMLElement
);
root.render(
<PolyfireProvider project=”your_project_slug”>
<App />
</PolyfireProvider>
);
reportWebVitals();
your_project_slug ஐ மாற்றிடுக: செயல்திட்ட பக்கத்தில் Project Slug அல்லது மாற்றுப்பெயரின் செயல்திட்டசுட்டி மூலம் வழங்குநரில் your_project_slug ஐ மாற்றையமைத்திடுவதை நினைவில் கொள்க.
2. பயனர் அமர்வுகளைச் சேர்த்திடுக : இதனுடைய வாடிக்கையாளர் பக்கத்தில் பணி செய்ய, தனித்தன்மைவாய்ந்த பயனர் அமர்வுகளை அமைக்க வேண்டும். அந்த வகையில், நம்முடைய பயன்பாட்டின் ஒவ்வொரு பயனரும் தனிப்பயன், கட்டணத்துடனான-வரையறுக்கப்பட்ட, API டோக்கனைக் கொண்டிருப்பார்கள், மேலும் நாம் அவர்களுக்குக் கொடுக்கும் கட்டுப்பாடுகளுக்கு ஏற்ப பயன்பாட்டைப் பயன்படுத்திகொள்ளலாம். இதைச் செய்ய, Authஎனும் தகவமைவிலிருந்து இந்த பயன்பாட்டின் உள்நுழைவு(login) செயலிகளைப் பயன்படுத்தலாம். App.tsx இல் அல்லது நம்முடைய சொந்த பயன்பாட்டில் எங்கிருந்தாலும், இந்த ஏறபுறுதிக் குறிமுறைவரிகளைச் சேர்த்திடுக:
import React from ‘react’;
import { usePolyfire } from ‘polyfire-js/hooks’;
function App() {
const { auth } = usePolyfire();
const { login, status } = auth;
if (status == ‘unauthenticated’)
return <button onClick={() => login(“github”)}>Login With GitHub</button>
else if (status == ‘loading’) return (<div>Loading…</div>)
else if (status == ‘authenticated’) return (<div>We already logged in!</div>)
else return <div />
}
export default App;
- ” HelloWorld” எனும் கவிதையை எழுத LLMகளைப் பயன்படுத்திகொள்க இப்போது ஒரு பயனருக்கு தனிப்பட்ட பயனர் அமர்வுகள் இருப்பதால், பாலிஃபயர் பின்புல API க்கு சில அழைப்புகளைச் செய்யலாம் மேலும் சில AI மாதிரிகளை இயக்கலாம். பாலிஃபயர் கூறுகளிலிருந்து பதிவிறக்கம் செய்யப்பட்ட அடிப்படையிலான generate() செயலியைப் பயன்படுத்திடுவோம். முன்னிருப்பாக generate() செயலியை திறமூல AI ஆனது gpt-3.5-turboஎனும் பின்புலத்தினை அழைக்கிறது, இது ChatGPT இயங்குகின்ற மாதிரியாகும். இன்னும் நம்முடைய App.tsx இல் அல்லது நம்முடைய பயன்பாட்டில் நாம் எங்கிருந்தாலும், நம்முடைய குறிமுறைவரிகளை மாற்றிடுக, அது பின்வருவனபோன்று இருக்கும்:
import React, { useState, useEffect } from “react”;
import { usePolyfire } from “polyfire-js/hooks”;
function App() {
const { auth, models } = usePolyfire();
const [helloWorld, set HelloWorld] = useState<string>();
const { login, status } = auth;
const { generate } = models;
useEffect(() => {
if (status === “authenticated”) {
generate(“Write a hello world haiku”).then(setHelloWorld);
}
}, [status]);
if (status == “unauthenticated”)
return <button onClick={() => login(“github”)}>Login With GitHub</button>;
else if (status == “loading” || !helloWorld) return <div>Loading…</div>;
else if (status == “authenticated”) return <div>{helloWorld}</div>;
else return <div />;
}
export default App;
நாம் இப்போது Polyfireஇன் பின்புலதளத்தில் உருவாக்கத் தொடங்கலாம்!
2.II. ChatGPT ஐ உருவாக்குதல்
இந்த பயிற்சியில், ChatGPT ஐ போன்ற ஒரு chatbot பயன்பாட்டை உருவாக்கிடுவோம். AI ஆனது APIகளை அணுகுவதற்கும் தருக்கபடிமுறையை உருவாக்குவதற்கும் React ஐ ஒரு முன்புக்க நூலகமாகவும், Tailwind ஐ CSS கட்டமைப்பாகவும், Polyfire இன் வாடிக்கையாளர் SDKஐயும் பயன்படுத்தி கொள்வோம்.
குறிப்பு: இந்த பயிற்சியில் நேரடியாக Chatஐ பயன்படுத்திகொள்வதற்குப் பதிலாக Polyfire hookஇல் உள்ள செயலிகளைப் பயன்படுத்திகொள்கிறது. இது ஒரு ஆர்வமூட்டுகின்ற பயிற்சியாக இருக்கும் என கருதப்படுகின்றது மேலும் இந்த வழிமுறையில் Polyfire பற்றி மேலும் அறிந்து கொள்ளமுடியும். எளிய அரட்டைஅறையை உருவாக்குவதே இலக்கு என்றால், CChat hook பயன்படுத்திகொள்வது சரிபார்த்துகொள்க
படிமுறை 0: துவங்குதல்
இதனை தொடங்குவதில் விளக்கமளித்துள்ளவாறுடி பாலிஃபயரைப் பயன்படுத்தி ஏற்கனவே ஒரு React projectஐ உருவாக்கி பயன்படுத்த தயாராக வைத்திருப்பதாக சி கருதப்படுகிறது.
படிமுறை 1: TailwindCSS என்பதன் மூலம் பாவணைசெய்தல்
நம்முடைய அரட்டையறை இடைமுகத்தை வடிவமைக்க, நாம் Tailwind CSS ஐப் பயன்படுத்துவோம்.அதை பின்வரும்கட்டளைவரியின்வாயிலாக நிறுவுகை செய்திடுக:
npm install -D tailwindcss
npx tailwindcss init
அதன்பிறகு பின்வருமாறான குறிமுறைவரிகளின் வாயிலாக நம்முடைய பாவணைகளை அமைத்து Tailwindஐ கட்டமைத்திடுக:
src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
}
tailwind.config.js
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [
“./src/**/*.{js,jsx,ts,tsx}”,
],
theme: {
extend: {},
},
plugins: [],
}
இந்த Tailwind பாணிகளைப் பயன்படுத்த சேவையகத்தை மறுதொடக்கம் செய்வதை உறுதிசெய்திடுக.
படிமுறை 2: அரட்டைஅறை இடைமுகத்தை வடிவமைத்தல்
தற்போது நம்முடைய அரட்டையறை இடைமுகத்தை வடிவமைக்க வேண்டிய நேரமாகும்: புதிய ChatBox.tsx எனும் கோப்பை உருவாக்கி அதில் அந்தக் குறிமுறைவரிகளை ஒட்டிடுக.
function ChatBox() {
return (
<div className=”flex flex-col items-center h-full py-2″>
<div className=”border-black border border-solid p-4 mb-2 w-[800px] grow”>
<pre>
<p><b>AI:</b> Hello World!</p>
</pre>
</div>
<div className=”flex w-[800px]”>
<div className=”flex grow items-center border-black border border-solid”>
<div className=”font-bold ml-4″>Human:</div>
<input className=”p-1 my-2 mx-4 h-12 font-mono grow” placeholder=”Type your message here !” />
</div>
<button className=”bg-black text-white ml-2 p-2 px-5 font-mono font-bold”>Send</button>
</div>
</div>
);
}
export default ChatBox
தற்போது, அந்த ChatBot இன் இடைமுகத்தை நம்முடைய முக்கிய பயன்பாட்டில் பதிவிறக்கம் செய்ய விரும்புகிறோம் அதற்காக.
நம்முடைய App.tsx ஐ மாற்றியமைத்திடுக, அது பின்வருமாறான குறிமுறைவரிகளைப் போன்றிருக்கும்:
function App() {
const { auth: { login, status } } = usePolyfire();
return (
<div className=”text-2xl font-bold p-2″>
{status === “unauthenticated” ? (
<button onClick={() => login(“github”)}>
Login with Github
</button>
) : status === “authenticated” ? (
<ChatBox />
) : (
“Loading…”
)}
</div>
);
}
இயக்கநேரசெயலில்லாத அரட்டையறை ஆனால் நம்மால் இன்னும் செய்திகளைத் தட்டச்சு முடியவில்லை; அதைச் செய்ய ChatBox பாகத்தில் ஜாவாஸ்கிரிப்ட் தருக்கபடிமுறையைச் சேர்க்க வேண்டும். அதனை பின்வருமாறுசெய்யப்படுகிறது:
function ChatBox({ messages }: { messages: { is_user_message: boolean, content: string }[] }) {
return (
<div className=”flex flex-col items-center h-full py-2″>
<div className=”border-black border border-solid p-4 mb-2 w-[800px] grow”>
<pre>
{messages.map(elem => (<div><b>{elem.is_user_message ? “Human:” : “AI:”}</b> <span>{elem.content}</span></div>))}
</pre>
</div>
<div className=”flex w-[800px]”>
<div className=”flex grow items-center border-black border border-solid”>
<div className=”font-bold ml-4″>Human:</div>
<input className=”p-1 my-2 mx-4 h-12 font-mono grow” placeholder=”Type your message here !” />
</div>
<button className=”bg-black text-white ml-2 p-2 px-5 font-mono font-bold”>Send</button>
</div>
</div>
);
}
export default ChatBox
இது நமக்கு ஒரு பிழையை காண்பிக்க வேண்டும்; அதைப் பற்றி கவலைப்பட வேண்டாம், அடுத்த கட்டத்திற்கு நேரடியாகச் செல்க.
அடுத்து, பயனர் செய்தி சமர்ப்பிப்புகளைக் கையாள செய்தியில் callbackஎனும் பண்பை அறிமுகப்படுத்துவதன் மூலம் நம்முடைய ChatBox ஐ மேம்படுத்திடலாம். இதற்கு, React இலிருந்து FormEvent எனும் வகையை பதிவிறக்கம் செய்திட வேண்டும். தொடர்ந்து ChatBox.tsxஐப் புதுப்பித்திடுக:
import { useState, FormEvent } from “react”;
function ChatBox({ messages, onMessage }: { messages: { is_user_message: boolean, content: string }[], onMessage: (message: string) => Promise<void> | void }) {
const [loading, setLoading] = useState(false);
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
- setLoading(true);
- const message = (e.target as any).message.value;
- if (message) {
- (e.target as any).message.value = “”;
- await onMessage(message);
- }
- setLoading(false);
- }
- return (
- <div className=”flex flex-col items-center h-full py-2″>
- <div className=”border-black border border-solid p-4 mb-2 w-[800px] grow overflow-y-scroll”>
- <pre>
- {messages.map(elem => (<p className=”whitespace-pre-wrap”><b>{elem.is_user_message ? “Human:” : “AI:”}</b> {elem.content}</p>))}
- </pre>
- </div>
- <form onSubmit={handleSubmit} className=”flex w-[800px]”>
- <div className=”flex grow items-center border-black border border-solid”>
- <div className=”font-bold ml-4″>Human:</div>
- <input className=”p-1 my-2 mx-4 h-12 font-mono grow” placeholder=”Type your message here !” name=”message” />
- </div>
- <input className=”cursor-pointer bg-black text-white ml-2 p-2 px-5 font-mono font-bold” value={loading ? “Loading…” : “Send >”} type=”submit” disabled={loading} />
- </form>
- </div>
- );
- }
- படிமுறை 3: அரட்டையறை தருக்கபடிமுறையை செயல்படுத்துதல்
- முந்தைய அரட்டையறை தருக்கபடிமுறை நன்கு செயல்படுவதற்காக, நம்முடைய App.tsx ஐப் புதுப்பிக்க வேண்டும், மேலும் அரட்டையறை செய்திகளை உருவாக்க பாலிஃபயர் API உடன் இணைந்து செயல்படவேண்டும்.
- முதலில்நாம் ஒரு அரட்டையறையை உருவாக்கி, உரையாடலின் அரட்டையின் வரலாற்றைக் காண்பிப்போம்.நம்முடைய பயன்பாட்டின் கூறுகளை புதுப்பிப்போம், அது பின்வருமாறு இருக்கும்:
- function App() {
- const { auth: { login, status }, utils: { Chat } } = usePolyfire();
- const [chat, setChat] = useState<Chat>();
- const [messages, setMessages] = useState<{ is_user_message: boolean, content: string }[]>([]);
- useEffect(() => {
- if (status === “authenticated”) {
- setChat(new Chat());
- }
- }, [status]);
- return (
- <>{
- status === “unauthenticated” ? (<button onClick={() => login(“github”)}>Login with Github</button>)
- chat ? <ChatBox messages={messages} onMessage={async (message) => {
await chat.sendMessage(message);
setMessages((await chat.getMessages()).reverse());
}} /> - “Loading…”
}</>
);
}
இதில் கேள்வியைத் தட்டச்சு செய்து பார்த்திடுக! இயல்புநிலை PolyFire AI மாதிரியான GPT-3.5 இலிருந்து நாம் பதிலைப் பெற வேண்டும்.
இறுதியாக நாம் ரியாக்ட் , பாலிஃபயர் ஆகியவற்றினைப் பயன்படுத்தி ChatGPT போன்ற எளிய அரட்டையறை பயன்பாட்டை வெற்றிகரமாக உருவாக்கிவிட்டோம் அதில் உரையாடல் செய்து மகிழ்ந்திடுக!
Hello World எனும் எளிய எடுத்துக்காட்டு
நம்முடையமுகப்புபக்க குறிமுறைவரிகளிலிருந்து நாம் உருவாக்கக்கூடிய எளிய உருவாக்கமகும் இது பாலிஃபயர் பற்றிய மிக அடிப்படையான அறிமுகமாகும்.
படிமுறை.1. பாலிஃபயர்ஐ பதிவிறக்கம் செய்தல்: SDKக்கான ஒரு React இன் சுருக்கமான Polyfire hook ஐ பயன்படுத்திகொள்க.
படிமுறை.2.பயனர்களை ஏற்புறுதிசெய்த்ல்: இந்தக் குறிமுறைவரிகள் நம்முடைய பயனர்களின் உலாவியில் இயங்குவதால், அவர்கள் இந்த APIஐ அழைப்பதற்கு முன், அவர்களின் அமர்வை ஏற்புறுதிசெய்திட வேண்டும். இங்கே அவற்றை நேரடியாக GitHub மூலம் ஏற்புறுதிசெய்திடபடுகின்றது, ஆனால் நாம் நேரடியாக நம்முடைய Firebaseஇன் அனுமதிசீட்டின் மூலமாகவும் ஏற்புறுதிசெய்திடலாம். பிற auth வழிமுறைகளுக்கு முன்னுரிமை அளிக்க விரும்பினால், Discordஐ அணுகிடுக.
படிமுறை.3. Hello World ஐ உருவாக்குதல் :இப்போது பயனர் ஏற்புறுதிசெய்யப்பட்டுவிட்டதால், “models” எனும் பொருளில் இருந்து “generate” எனும் செயலியைப் பயன்படுத்தி எளிய LLM நிறைவை உருவாக்கலாம். அதற்கான குறிமுறைவரிகள் பின்வருமாறு
import React, { useState, useEffect } from ‘react’;
import { usePolyfire } from ‘polyfire-js/hooks’;
function App() {
const { auth, models } = usePolyfire();
const [helloWorld, set HelloWorld] = useState<string>();
const { login, status } = auth
const { generate } = models
useEffect(() => {
if (status === “authenticated”) {
generate(“Write a hello world haiku”).then(setHelloWorld);
}
}, [status])
return (
<div className=”text-2xl font-bold p-4″>
{status === “unauthenticated” ? (
<button onClick={() => login(“github”)}>
Login with Github
</button>
) : helloWorld ? (
<p style={{ whiteSpace: “pre-line” }}>{helloWorld}</p>
) : (
“Loading…”
)}
</div>
);
}
export default App