جاوا اسکریپت واکنشی با انتشار پایدار

از React و Stable Diffusion API برای ساختن یک برنامه هوش مصنوعی واکنشی که تصاویر را از متن ارسال شده توسط کاربر تولید می کند، استفاده کنید.

• شروع به کار با انتشار پایدار
• ساخت رابط کاربری React
• اتصال به نقطه پایانی API
• برنامه را دقیق تنظیم کنید
• نتیجه‌گیری

اگر در سال گذشته در هیمالیا کوله‌پشتی می‌کردید، هوش مصنوعی مولد اخیراً بسیار محبوب شده است. تولیدکننده‌های متن مانند ChatGPT و Google Bard یکی از انواع مدل‌های هوش مصنوعی مولد هستند. مولدهای متن به تصویر یکی دیگر از این موارد است. یکی از رهبران این فضا، Stable Diffusion، یک سیستم AI تولید تصویر منبع باز است.

ما از API آزمایشی رایگان Stable Diffusion برای ساختن یک کلاینت React.js استفاده می‌کنیم که به سرویس متصل می‌شود و با آن تعامل دارد.

آغاز با Stable Diffusion

Stable Diffusion از مخزن GitHub آن در دسترس است. چندین پروژه نقاط پایانی را برای تعامل با نصب های Stable Diffusion میزبانی شده ارائه می دهند، بنابراین می توانید از تنظیم و آموزش مدل خودداری کنید. یکی از بهترین رابط‌ها برای Stable Diffusion Stable Diffusion API است که یک آزمایش رایگان ارائه می‌کند. ما از API استفاده می‌کنیم تا ببینیم چگونه می‌توانیم با Stable Diffusion در React تعامل داشته باشیم، یک کتابخانه JavaScript جلویی که همچنین رایگان و منبع باز است.

برای شروع، از ابزار خط فرمان create-react-app برای راه‌اندازی یک برنامه جدید React استفاده می‌کنیم. برای این کار به Node و NPM نیاز دارید. سپس، create-react-app را با $ npm i -g create-react-app نصب کنید. اکنون می‌توانید یک برنامه ساده با دستور $ create-react-app react-sd ایجاد کنید. برای آزمایش آن، به دایرکتوری react-sd بروید و $ npm start را تایپ کنید و از صفحه فرود در localhost:3000 دیدن کنید.

دریافت Stable Diffusion

برای دسترسی به Stable Diffusion API باید یک حساب آزمایشی رایگان راه‌اندازی کنید. پس از تنظیم حساب خود، روی مشاهده کلید API کلیک کنید و رشته ظاهر شده را کپی کنید. می‌توانید کلید API خود را از صفحه تنظیمات API بگیرید. اگر می‌خواهید بیشتر بدانید، در اینجا اسناد API انتشار پایدار است.

واسطه کاربری React را بسازید

اکنون که React و Stable Diffusion را راه‌اندازی کرده‌ایم، بیایید شروع به ساخت یک رابط کاربری کنیم که به ما اجازه می‌دهد یک اعلان متنی را وارد کنیم، آن را به نقطه پایانی Stable Diffusion API ارسال کنیم و تصویر حاصل را نمایش دهیم. ما از یک صفحه قابل پیمایش ساده برای نمایش لیست تصاویر تولید شده استفاده خواهیم کرد.

ابتدا، یک کادر متنی برای دریافت درخواست و یک دکمه ارسال برای همراهی با آن، همانطور که در فهرست ۱ نشان داده شده است، ایجاد می‌کنیم. این کد می‌تواند جایگزین فایل پیش‌فرض App.js React شود.< /p>

import React, { useState } from "react";

const App = () => {
  const [textPrompt, setTextPrompt] = useState("");
  const [prompts, setPrompts] = useState([]);

  const generateImage = async () => {
  };

  const handleClick = () => {
    setPrompts([...prompts, textPrompt]);
    setTextPrompt("");
    generateImage();
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Enter a text prompt"
        onChange={(e) => setTextPrompt(e.target.value)}
      />
      <button onClick={handleClick}>Generate Image</button>
      <ul>
        {prompts.map((prompt) => (
          <li key={prompt}>{prompt}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

اکنون برنامه ورودی متن را می پذیرد و آن را در آرایه ای ذخیره می کند که در UI به عنوان یک لیست نامرتب نمایش داده می شود. ورودی اعلان و آرایه اعلان های ارسالی هر دو متغیرهای قلاب useState هستند.

به نقطه پایانی API متصل شوید

تاکنون، تابع generateImage() بدون عملیات است. بیایید اجرای آن را شروع کنیم. اولین گام ارسال اعلان متن به نقطه پایانی Stable Diffusion است. Stable Diffusion API یک سبک RESTful است که همانطور که در اینجا توضیح داده شده، انتظار درخواست‌ها و پاسخ‌های JSON را دارد. این اسناد شامل فهرستی از نقاط پایانی API، از جمله نقطه پایانی متن به تصویر، که در اینجا توضیح داده شده.

یک چروک که باید با آن مقابله کنیم این است که API Stable Diffusion درخواست های مرورگر را دوست ندارد. این یک مشکل امنیتی است (نمایش کلید API در مرورگر)، بنابراین ما از یک پروکسی عمومی برای حل آن استفاده خواهیم کرد. این کار را در یک برنامه دنیای واقعی که برنامه شما در معرض نمایش است، انجام ندهید. در این صورت، از یک برنامه کاربردی برای نگه داشتن کلید و تا کردن آن در درخواست جلویی استفاده می‌کنید. در این مورد، ما از پروکسی Heroku’s CORS در هر جایی استفاده خواهیم کرد که به زودی نشان خواهم داد.

بنابراین، برنامه کلی این است که متن کاربر را گرفته و به عنوان یک درخواست POST به نقطه پایانی API ارسال کنید. بدنه JSON فیلدهایی را برای کلید API و متن کاربر نگه می‌دارد. پاسخ به عنوان یک بدنه پاسخ JSON برمی گردد (اطلاعات بیشتر در مورد قالب اینجا). چیزی که ما دنبال آن هستیم آرایه خروجی است که در مورد ما دارای یک عنصر است: URL تصویر تولید شده.

در رابط کاربری، URL را می گیریم و آن را در یک جزء تصویر در کنار دستور متن در لیست نامرتب قرار می دهیم. فهرست ۲ کدی را برای انجام این وظایف با تکامل فهرست ۱ نشان می دهد. 

import React, { useState } from "react";

const App = () => {
  const [textPrompt, setTextPrompt] = useState("");
  const [prompts, setPrompts] = useState([]);

  const generateImage = async () => {
    const apiKey = "YOUR KEY HERE"; 
    const url = "https://stablediffusionapi.com/api/v3/text2img"; 
    const proxyUrl = "https://cors-anywhere.herokuapp.com/";

    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ key: apiKey, prompt: textPrompt }),
    };

    try {
      const response = await fetch(proxyUrl + url, requestOptions);
      const data = await response.json();
      
      // Get the image URL from the response
      const imageUrl = data.output[0];
      
      // Update the prompts array with the generated image URL
      setPrompts([...prompts, { prompt: textPrompt, imageUrl }]);
    } catch (error) {
      console.error("Error generating image:", error);
    }
  };
  
  const handleClick = async () => {
    setPrompts([...prompts, { prompt: textPrompt, imageUrl: "" }]);
    setTextPrompt("");
    await generateImage();
  };

  return (
    <div className="container">
      <input className="input-container"
        type="text"
        placeholder="Enter a text prompt"
        value={textPrompt}
        onChange={(e) => setTextPrompt(e.target.value)}
      />
      <button onClick={handleClick}>Generate Image</button>
      <ul className="prompts-list">
        {prompts.map((item, index) => (
          <li key={index} className="prompt-item">
            <p className="prompt-text">{item.prompt}</p>
            {item.imageUrl && <img src={item.imageUrl} alt="Generated Image" className="generated-image"/>}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

دو نکته مهم در اینجا: ابتدا، مطمئن شوید که کلید API واقعی خود را در جایی که روی آن نوشته شده است “YOUR API KEY HERE” قرار دهید. دوم (یک بار دیگر) این کار را در یک برنامه وب عمومی انجام ندهید زیرا اگر این کار را انجام دهید، کلید شما فاش می شود.

بعد، توجه داشته باشید که ما فیلد imageUrl را به متغیر useState فرمان اضافه کرده‌ایم، بنابراین می‌توانیم تصاویر تولید شده را ردیابی و نمایش دهیم. همچنین به انتظار برای generateImage() توجه کنید تا در تابع handleClick() به پایان برسد تا تصویر تولید شده نمایش داده شود.

ما همچنین برخی از استایل‌ها را اضافه کرده‌ایم که به زودی خواهید دید.

اگر این برنامه را با npm start راه‌اندازی کنید و آن را در مرورگر مشاهده کنید، اولین باری که درخواست را ارسال می‌کنید، ممکن است پروکسی Heroku CORS از شما درخواست مجوز کند. در کنسول جاوا اسکریپت، پیامی در مورد مجوزهای از دست رفته (وضعیت ۴۰۱) و یک پیوند خواهید دید. فقط روی پیوند کلیک کنید و پس از باز شدن صفحه، دکمه دسترسی موقت را فشار دهید، همانطور که در شکل ۱ نشان داده شده است.

شکل ۱. درخواست مجوز پروکسی CORS.

اکنون هنگامی که درخواست‌ها را ارسال می‌کنید، برنامه فهرست درخواست‌ها و تصاویر آنها را همانطور که در شکل ۲ نشان داده شده است نشان می‌دهد.

شکل ۲. رابط کاربری در حال کار است.

برنامه را دقیق تنظیم کنید

همه چیز کار می کند، اما ما می توانیم چندین بهبود ایجاد کنیم. برای یکی، وضعیت بارگذاری برای همه تصاویر نمایش داده می شود. برای دیگری، Stable Diffusion API گاهی اوقات وضعیت پردازش را با یک فیلد ETA برای زمانی که تصویر باید تکمیل شود، برمی‌گرداند. یک رابط کاربری پیچیده تر وضعیت پردازش را کنترل می کند.

اولین اولویت بهبود استایل است. بیایید CSS را اضافه کنیم تا همه چیز زیباتر به نظر برسد، از جمله نمایش تصویر با فرمت دقیق‌تر و استایل دادن به متن.

.container {
  text-align: center;
  margin-top: 50px;
}

.input-container {
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.prompts-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.prompt-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.prompt-text {
  flex: 1;
  font-size: 18px;
}

.generated-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.loading-text {
  font-size: 14px;
  font-style: italic;
  color: #aaa;
}

اکنون می‌توانیم با افزودن این خط به ابتدای فایل App.js، سبک‌های جدید را وارد کنیم:

import "./App.css";

اکنون، همانطور که در شکل ۳ نشان داده شده است، متن ورودی، اعلان دکمه و تاریخچه تصویر را با ظاهری معقولتر خواهیم دید.

شکل ۳. برنامه با طرح‌بندی بهبودیافته.

به عنوان یک پیشرفت نهایی، اجازه دهید قابلیت کلیک روی یک تصویر و ارسال آن را همراه با درخواست به Stable Diffusion img2img endpoint، که امکان کلیک روی یک تصویر موجود و ترکیب آن با یک متن درخواستی برای URL تصویر خروجی جدید را فراهم می کند. وقتی روی آن کلیک می‌شود، تصویر درخواستی صادر می‌کند که دارای یک فیلد اضافی در بدنه JSON است: init_image، با URL تصویری که روی آن کلیک کرده‌اید. می‌توانید کد به‌روزرسانی‌شده را در فهرست ۴ ببینید، که دارای کنترل‌کننده کلیک روی تصویر و تابع به‌روزشده generateImage() است.

const generateImage = async (imageUrl) => {
  const apiKey = "YOUR KEY HERE";
  let url = "https://stablediffusionapi.com/api/v3/text2img";
  const proxyUrl = "https://cors-anywhere.herokuapp.com/";

  const requestBody = {
    key: apiKey,
    prompt: textPrompt,
  };

  if (imageUrl) {
    requestBody.init_image = imageUrl;
    requestBody.samples = 1;
    requestBody.width = 800; 
    requestBody.height = 800;
    url = "https://stablediffusionapi.com/api/v3/img2img";
  }

  const requestOptions = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(requestBody),
  };

  try {
    setIsLoading(true);
    const response = await fetch(proxyUrl + url, requestOptions);
    const data = await response.json();

    if (data.status === "error") {
      console.error("Error generating image: " + data.message);
      alert(data.message);
      return;
    }
    // Get the image URL from the response
    const generatedImageUrl = data.output[0];

    // Update the prompts array with the generated image URL
    setPrompts([...prompts, { prompt: textPrompt + (imageUrl ? " (image2image)" : ""), imageUrl: generatedImageUrl }]);
  } catch (error) {
    console.error("Error generating image:", error);
  } finally {
    setIsLoading(false);
  }
};

//...
const handleImageClick = (imageUrl) => {
  console.log("Clicked on image:", imageUrl);
        generateImage(imageUrl);
};

// ...
<img onClick={() => handleImageClick(item.imageUrl)} src={item.imageUrl} alt="Generated Image" className="generated-image"/>

کار اصلی که در اینجا انجام می دهیم این است که یک کنترل کننده کلیک به تصویر اضافه می کنیم و اگر آرگومان imageUrl در generateImage() وجود دارد، از image2image< استفاده کنید. /code> URL و آرگومان های لازم را به بدنه JSON اضافه کنید (این نقطه پایانی به پارامترهای نمونه، عرض و ارتفاع نیاز دارد).