ეს გაკვეთილი წარმოგიდგენთ AI ვებ-კონტენტის გენერაციის პირდაპირ მიდგომას, კონტენტის ერთბაშად ნაკადად გადაცემითა და რენდერინგით. ცადეთ ცოცხალი დემო აქ! → Webapp Factory მიუხედავად იმისა, რომ ხელოვნურ ინტელექტთან და მანქანურ სწავლებასთან დაკავშირებულ ყველაფერში, როგორც წესი, Python გვახსენდება, ვებ-დეველოპმენტის საზოგადოება ძლიერ ეყრდნობა JavaScript-სა და Node-ს. წარმოგიდგენთ რამდენიმე გზას, თუ როგორ შეგიძლიათ გამოიყენოთ დიდი ენობრივი მოდელები (LLM) ამ პლატფორმაზე. LLM-ების JavaScript-ში გასაშვებად მრავალი მიდგომა არსებობს, ONNX-ის გამოყენებიდან კოდის WASM-ად გადაქცევამდე და სხვა ენებზე დაწერილი გარე პროცესების გამოძახებამდე. ამ ტექნიკათაგან ზოგიერთი უკვე ხელმისაწვდომია გამოსაყენებლად მზა NPM ბიბლიოთეკების სახით: თუმცა, დიდი ენობრივი მოდელების ასეთ გარემოში გაშვება შეიძლება საკმაოდ რესურსმომხმარებელი იყოს, განსაკუთრებით იმ შემთხვევაში, თუ ვერ იყენებთ აპარატურულ აჩქარებას. დღესდღეობით, სხვადასხვა ღრუბლოვანი პროვაიდერი გვთავაზობს კომერციულ API-ებს ენობრივი მოდელების გამოსაყენებლად. წარმოგიდგენთ Hugging Face-ის მიმდინარე შეთავაზებას: * უფასო Inference API, რომელიც ყველას საშუალებას აძლევს გამოიყენოს მცირე და საშუალო ზომის მოდელები საზოგადოებიდან. * უფრო მოწინავე და წარმოებისთვის მზა Inference Endpoints API მათთვის, ვისაც უფრო დიდი მოდელები ან მორგებული ინფერენსის კოდი სჭირდება. ეს ორი API შეიძლება გამოყენებულ იქნას Node-დან Hugging Face Inference API ბიბლიოთეკის მეშვეობით NPM-ზე. 💡 საუკეთესო მოდელები, როგორც წესი, საჭიროებენ დიდ მეხსიერებას (32 გბ, 64 გბ ან მეტი) და აპარატურულ აჩქარებას კარგი ლატენტურობის მისაღწევად (იხილეთ ბენჩმარკები). მაგრამ ასევე ვხედავთ ტენდენციას, რომ მოდელები ზომაში მცირდება, თუმცა ინარჩუნებენ შედარებით კარგ შედეგებს ზოგიერთ დავალებაზე, მოთხოვნებით, რომელიც 16 გბ-მდე ან თუნდაც 8 გბ მეხსიერებასაც კი შეადგენს. ჩვენ გამოვიყენებთ NodeJS-ს ჩვენი გენერაციული AI ვებ-სერვერის შესაქმნელად. მოდელი იქნება WizardCoder-15B, რომელიც იმუშავებს Inference Endpoints API-ზე, მაგრამ თავისუფლად შეგიძლიათ სცადოთ სხვა მოდელითა და სტეკით. თუ სხვა გადაწყვეტილებები გაინტერესებთ, წარმოგიდგენთ ალტერნატიული იმპლემენტაციების მითითებებს: პირველ რიგში, უნდა დავაყენოთ ახალი Node პროექტი (შეგიძლიათ ამ შაბლონის კლონირება, თუ გსურთ). შემდეგ, შეგვიძლია დავაინსტალიროთ Hugging Face Inference კლიენტი: და დავაყენოთ ის `src/index.mts`-ში: 💡 შენიშვნა: თუ არ გსურთ Endpoint ინსტანციის საფასურის გადახდა ამ გაკვეთილის შესასრულებლად, შეგიძლიათ გამოტოვოთ ეს ნაბიჯი და ამის ნაცვლად ნახოთ უფასო Inference API-ის მაგალითი. გთხოვთ, გაითვალისწინოთ, რომ ეს იმუშავებს მხოლოდ მცირე ზომის მოდელებთან, რომლებიც შესაძლოა არ იყოს ისეთი მძლავრი. ახალი Endpoint-ის დასადებად შეგიძლიათ გადახვიდეთ Endpoint-ის შექმნის გვერდზე. მოგიწევთ WizardCoder-ის არჩევა Model Repository ჩამოსაშლელი სიიდან და დარწმუნდით, რომ საკმარისად დიდი GPU ინსტანციაა არჩეული: მას შემდეგ რაც თქვენი endpoint შეიქმნება, შეგიძლიათ დააკოპიროთ URL ამ გვერდიდან: დააყენეთ კლიენტი მის გამოსაყენებლად: ახლა შეგიძლიათ მიუთითოთ ინფერენსის კლიენტს, რომ გამოიყენოს ჩვენი პირადი endpoint და გამოიძახოს ჩვენი მოდელი: ახლა დროა დავაბრუნოთ HTML ვებ-კლიენტისთვის, როდესაც ისინი ეწვევიან URL-ს, მაგალითად /app. ჩვენ შევქმნით endpoint-ს Express.js-ით, რათა ნაკადად გადმოვცეთ შედეგები Hugging Face Inference API-დან. რადგან ამ მომენტისთვის UI არ გვაქვს, ინტერფეისი იქნება მარტივი URL პარამეტრი prompt-ისთვის: გაუშვით თქვენი ვებ-სერვერი: და გახსენით https://localhost:3000?prompt=some%20prompt. რამდენიმე წამის შემდეგ თქვენ უნდა ნახოთ პრიმიტიული HTML კონტენტი. თითოეული ენობრივი მოდელი განსხვავებულად რეაგირებს prompt-ზე. WizardCoder-ისთვის ხშირად საუკეთესოდ მუშაობს მარტივი ინსტრუქციები: Tailwind არის პოპულარული CSS ფრეიმვორკი კონტენტის დასასტილად, და WizardCoder ამაში თავიდანვე კარგადაა გაწვრთნილი. ეს საშუალებას აძლევს კოდის გენერაციას შექმნას სტილები მოძრაობაში, სტილების ფურცლის გენერაციის გარეშე გვერდის დასაწყისში ან ბოლოს (რაც გვერდს გაჭედილად აგრძნობინებდა). შედეგების გასაუმჯობესებლად, ჩვენ ასევე შეგვიძლია მივმართოთ მოდელს გზის ჩვენებით (). რთულია სანდოობით თავიდან აიცილოთ ჰალუცინაციები და შეცდომები (როგორიცაა მთლიანი ინსტრუქციების გამეორება, ან „lorem ipsum“ შემცვლელი ტექსტის წერა) კოდის გენერაციისთვის განკუთვნილ მსუბუქ მოდელებზე, უფრო დიდ ზოგადი დანიშნულების მოდელებთან შედარებით, მაგრამ შეგვიძლია ვეცადოთ მათ შერბილებას. შეგიძლიათ სცადოთ იმპერატიული ტონის გამოყენება და ინსტრუქციების გამეორება. ეფექტური გზა ასევე შეიძლება იყოს გზის ჩვენება გამოსავლის ნაწილის ინგლისურად მიცემით: ახლა გვაქვს სისტემა, რომელსაც შეუძლია HTML, CSS და JS კოდის გენერირება, მაგრამ მას ახასიათებს გატეხილი URL-ების ჰალუცინაცია, როდესაც სთხოვენ გამოსახულებების შექმნას. საბედნიეროდ, გამოსახულების გენერაციის მოდელების არჩევის მრავალი ვარიანტი გვაქვს! → ყველაზე სწრაფი გზა დასაწყებად არის Stable Diffusion მოდელის გამოძახება ჩვენი უფასო Inference API-ის გამოყენებით ჰაბზე ხელმისაწვდომი ერთ-ერთი საჯარო მოდელით: შემდეგი ხაზის დამატება prompt-ში საკმარისი იყო WizardCoder-ისთვის, რათა გამოეყენებინა ჩვენი ახალი /image endpoint! (შესაძლოა დაგჭირდეთ მისი მორგება სხვა მოდელებისთვის): ასევე შეგიძლიათ სცადოთ უფრო კონკრეტული იყოთ, მაგალითად: Alpine.js არის მინიმალისტური ფრეიმვორკი, რომელიც საშუალებას გვაძლევს შევქმნათ ინტერაქტიული UI-ები ყოველგვარი დაყენების, build pipeline-ის, JSX დამუშავების გარეშე. ყველაფერი ხდება გვერდის შიგნით, რაც მას შესანიშნავ კანდიდატად აქცევს სწრაფი დემოს UI-ის შესაქმნელად. წარმოგიდგენთ სტატიკურ HTML გვერდს, რომელიც შეგიძლიათ მოათავსოთ /public/index.html-ში: ამის გასაშვებად, დაგჭირდებათ გარკვეული ცვლილებების შეტანა: აქამდე ჩვენ ვქმნიდით Tailwind utility კლასების სრულ მიმდევრობას, რაც შესანიშნავია თავისუფლების მისაცემად...