หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

AI GIF

การสาธิต AI GIF

AI GIF เป็นแอปพลิเคชั่นอันทรงพลังที่ให้คุณสร้าง GIF โดยใช้เทคนิค AI ขั้นสูง ไม่ว่าคุณกำลังมองหามีมที่มีเอกลักษณ์ แอนิเมชั่นที่น่าดึงดูด หรือเพียงแค่สำรวจขอบเขตของเนื้อหาที่สร้างโดย AI AI GIF ก็พร้อมช่วยคุณแล้ว

มันถูกสร้างขึ้นจากตัวเริ่มต้น Next.js + TailwindCSS อย่างเป็นทางการ

การซื้อคืนนี้แม้จะจัดแสดงแอป AI เฉพาะเจาะจง แต่ก็มีจุดประสงค์เพื่อทำหน้าที่เป็นผู้เริ่มต้น คุณสามารถนำไปใช้ แก้ไขโมเดลบนแบ็กเอนด์ (สำรวจตัวเลือกมากมาย ทำซ้ำข้อเสนอ) และแล้ว คุณมีแอปใหม่!

รายการตรวจสอบการผลิตแอป AI

ฉันทำคำแนะนำอย่างรวดเร็วเกี่ยวกับเรื่องนี้ที่นี่

ด้านล่างนี้เป็นขั้นตอนที่ดำเนินการระหว่างการพัฒนาแอป ทำหน้าที่เป็นแนวทางทั่วไปในการสร้างแอปพลิเคชันที่ใช้ AI

สถาปัตยกรรมแอป : สถาปัตยกรรมแอปนั้นตรงไปตรงมา ผู้ใช้ป้อนข้อมูลพร้อมท์ผ่านแบบฟอร์ม เมื่อส่งแล้ว ตัวจัดการเส้นทางแบ็กเอนด์จะถูกทริกเกอร์ ซึ่งจะเรียกโมเดล AI และส่งคืนผลลัพธ์

AI Model Hosting : เราใช้ Replicate เพื่อโฮสต์โมเดล AI ของเรา ซึ่งช่วยลดความจำเป็นในการปรับใช้ส่วนบุคคล การจัดการการอนุมาน การปรับขนาด และงานที่เกี่ยวข้องกับ Devop ที่มักจะยุ่งยาก

การเพิ่มประสิทธิภาพ :

  • คำแนะนำพร้อมท์ : การใช้ประโยชน์จากไลบรารีเช่น promptmaker สามารถเติมแบบฟอร์มล่วงหน้าได้ โดยเสนอแนวคิดที่สร้างสรรค์แก่ผู้ใช้

  • สถานะการโหลด : เพื่อปรับปรุงประสบการณ์ผู้ใช้ในขณะที่รอผลลัพธ์ เราได้ใช้ GIF การโหลดซึ่งสอดคล้องกับธีมของแอปของเรา

  • การตรวจสอบความปลอดภัย : สำหรับการกรองเนื้อหาเบื้องต้น มีการใช้ไลบรารีเก่าที่ชื่อว่า bad-words หากต้องการตรวจสอบเนื้อหาเชิงลึกมากขึ้น ให้ลองใช้ไลบรารีสมัยใหม่ เช่น ตัวกรอง nsfw

การจำกัดอัตรา : ก่อนเปิดตัว โดยเฉพาะแอปฟรี การพิจารณาต้นทุนที่อาจเกิดขึ้นที่เกี่ยวข้องกับสถาปัตยกรรมแบบไร้เซิร์ฟเวอร์เป็นสิ่งสำคัญ เพื่อหลีกเลี่ยงการเรียกเก็บเงินที่ไม่คาดคิด เราได้รวมการจำกัดอัตราโดยใช้ Upstash เพื่อให้มั่นใจว่ากระแสคำขอมีการควบคุม การตั้งค่าไม่ยุ่งยากและมีประสิทธิภาพ

ขณะนี้ เมื่อทุกอย่างพร้อมแล้ว การเชิญผู้ใช้ทันทีจึงเป็นเรื่องที่น่าสนใจ อย่างไรก็ตาม ตรวจสอบให้แน่ใจเสมอว่ามีการกำหนดมาตรการป้องกันเพื่อรักษางบประมาณและประสิทธิภาพ

การปรับใช้ : ไซต์ถูกปรับใช้บน Vercel

เริ่มต้นใช้งาน

ติดตั้งการพึ่งพา :

 ติดตั้ง npm# oryarn# ติดตั้ง orpnpm# ติดตั้ง orbun

พื้นที่เก็บข้อมูลนี้ใช้ Replicate สำหรับการอนุมานโมเดลและ Upstash สำหรับการจำกัดอัตรา ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าบัญชีสำหรับบริการทั้งสองแล้ว

ตัวแปรสภาพแวดล้อมที่จะเพิ่ม :

สร้างไฟล์ .env.local และเพิ่มตัวแปรเหล่านี้

 REPLICATE_API_TOKEN=
UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

รันเซิร์ฟเวอร์การพัฒนา :

 npm รัน dev# oryarn dev# orpnpm dev# orbun dev

เปิด http://localhost:3000 ด้วยเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์

คุณสามารถเริ่มแก้ไขเพจได้โดยการแก้ไข app/page.tsx หน้าจะอัปเดตอัตโนมัติเมื่อคุณแก้ไขไฟล์

โปรเจ็กต์นี้ใช้ next/font เพื่อปรับให้เหมาะสมและโหลด Inter ซึ่งเป็นแบบอักษร Google แบบกำหนดเองโดยอัตโนมัติ

เรียนรู้เพิ่มเติม

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Next.js โปรดดูแหล่งข้อมูลต่อไปนี้:

  • เอกสาร Next.js - เรียนรู้เกี่ยวกับคุณสมบัติและ API ของ Next.js

  • เรียนรู้ Next.js - บทช่วยสอน Next.js แบบโต้ตอบ

คุณสามารถตรวจสอบพื้นที่เก็บข้อมูล Next.js GitHub - ยินดีรับข้อเสนอแนะและการมีส่วนร่วมของคุณ!

ปรับใช้บน Vercel

วิธีที่ง่ายที่สุดในการปรับใช้แอป Next.js คือการใช้แพลตฟอร์ม Vercel จากผู้สร้าง Next.js

ตรวจสอบเอกสารการติดตั้ง Next.js ของเราเพื่อดูรายละเอียดเพิ่มเติม

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด