Fitur | Tangkapan layar | Panduan Aplikasi SDFX | Instalasi | Berlari
Platform tanpa kode terbaik untuk membangun dan berbagi aplikasi AI dengan UI yang indah.
Bergabunglah dengan komunitas Server Perselisihan kami untuk berita terbaru, tutorial video, dan aplikasi demo.
SDFX memungkinkan pembuatan antarmuka pengguna yang mudah untuk alur kerja yang rumit. Aplikasi SDFX menggabungkan alur kerja yang nyaman dengan antarmuka pengguna. JSON yang menjelaskan alur kerja diperkaya dengan informasi meta tambahan tentang aplikasi dan pembuatnya, serta hubungan antara komponen UI dan widget node.
Fitur
Tangkapan layar
Panduan Struktur JSON Aplikasi SDFX
Instalasi
Berlari
Instalasi untuk pengguna yang sudah menggunakan ComfyUI Lokal
Proyek ini awalnya dibuat untuk memenuhi kebutuhan pengguna dari A1111 (UI berbasis formulir) dan ComfyUI (berbasis node grafik), yang merupakan dua komunitas dengan visi berbeda. Dengan SDFX, kami bertujuan untuk menggabungkan keunggulan kedua dunia, tanpa kekurangannya. Apa yang SDFX izinkan, misalnya, adalah pembuatan grafik yang kompleks (seperti yang dilakukan di ComfyUI), namun dengan overlay UI tingkat tinggi yang lebih sederhana (seperti antarmuka berbasis formulir, dengan UI yang luar biasa). Jadi, secara teori, seseorang dapat membuat ulang A1111 dengan SDFX dan membagikan JSON secara online.
Ini adalah draf awal, masih banyak yang harus dilakukan (kebanyakan App Creator yang akan segera dirilis). Beberapa orang telah kehilangan kepercayaan pada kami, bahkan menyebut kami vaporware. Kenyataannya, seperti yang akan Anda lihat dengan menelusuri kode sumbernya, SDFX memerlukan banyak pekerjaan. Itu dibuat oleh pengembang tunggal, dan sekarang timnya berkembang. Kami mencoba melakukan hal yang benar, hanya berfokus pada hal terbaik yang kami lakukan: UI dan desain produk dengan tumpukan frontend modern. Oleh karena itu, kami mengandalkan 100% pada backend Comfy, menjadikan SDFX sepenuhnya kompatibel dengan ComfyUI. Namun, menginstal ComfyUI tidak diperlukan, karena semuanya diabstraksi. Kami juga berupaya menyederhanakan proses instalasi; dalam kebanyakan kasus, Anda hanya perlu mengklik dua kali pada setup.bat / setup.sh dan ikuti wizard.
Kami berharap Anda menyukainya, dan dengan senang hati kami berbagi visi dan repo ini dengan Anda, berharap ini akan membuka jalan bagi banyak kontribusi dari Anda, untuk memajukan ruang AI sumber terbuka.
Selamat datang di panduan struktur JSON untuk aplikasi SDFX. Berikut ini adalah ikhtisar komprehensif bagi pengembang yang ingin memahami dan memanfaatkan format JSON untuk membuat UI yang ramah pengguna dengan SDFX. Tujuan kami adalah memastikan kejelasan dan kemudahan penggunaan, sehingga Anda dapat mengintegrasikan dan bertukar aplikasi SDFX dengan percaya diri.
{
"name" : " SDFX Timeline SD15 " ,
"meta" : {},
"type" : " sdfx " ,
"mapping" : {
"leftpane" : [],
"mainpane" : [],
"rightpane" : []
},
"version" : 0.4 ,
"last_node_id" : 287 ,
"last_link_id" : 569 ,
"nodes" : [],
"links" : [],
"groups" : [],
"config" : {},
"extra" : {}
}
name
: Nama yang Anda tetapkan untuk aplikasi Anda.meta
: Kunci ini menampung detail penting tentang aplikasi Anda, misalnya: - ` version ` : "0.4.1"
- ` description ` : "Timeline for SD15"
- ` icon ` : null (This should be updated with a link to a 512x512 image, or a base64 URL)
- ` keywords ` : "timeline, SD15, upscaler, LCM"
- ` author ` : "SDFX"
- ` license ` : "MIT"
- ` url ` : " https://sdfx.ai "
type
: Ditunjuk sebagai "sdfx"
, kunci ini mengidentifikasi aplikasi sebagai aplikasi SDFX dengan tetap menjaga kompatibilitas dengan ComfyUI. Ini berarti aplikasi SDFX dapat diseret dan dilepas ke ComfyUI dan sebaliknya.mapping
: Menentukan struktur UI. Dalam pemetaan, Anda mungkin menemukan struktur berikut untuk mendeskripsikan komponen Tab dengan pemuat pos pemeriksaan, yang sepenuhnya kompatibel dengan kelas CSS Tailwind: {
"label": "Generation",
"component": "Tab",
"class": "p-4 lg : p-8 xl : p-10 overflow-y-scroll",
"childrin": [
{
"component": "div",
"class": "flex justify-between space-x-4 lg : space-x-8 ",
"childrin": [
{
"label": "Section 1",
"class": "leftview w-80",
"component": "div",
"childrin": [
{
"label": "Checkpoint",
"showLabel": true,
"type": "control",
"component": "ModelPicker",
"target": {
"nodeId": 4,
"nodeType": "CheckpointLoaderSimple",
"widgetNames": [ "ckpt_name" ] ,
"widgetIdxs": [ 0 ]
}
}
]
}
]
}
]
}
Pengembang dapat memanfaatkan beragam komponen UI untuk membuat antarmuka pengguna. Berikut daftar komponen yang tersedia yang dapat digunakan dan dikustomisasi dengan VueJS dan Tailwind CSS:
Button
DragNumber
ImageLoader
Input
ModelPicker
Number
Preview
Prompt
PromptTimeline
Selector
Slider
TextArea
Toggle
BoxDimensions
BoxSeed
Selain itu, elemen HTML seperti div
, p
, ul
, li
, img
, iframe
, video
, dan lainnya dapat digunakan untuk memperkaya antarmuka pengguna.
Untuk tata letak dan desain struktural, elemen seperti SplitPane
, SplitH
, SplitV
, Tab
, TabBox
, TabBar
, dan ToggleSettings
menawarkan penyesuaian lebih lanjut.
Kemudahan dalam membuat komponen baru dengan VueJS dan Tailwind CSS tidak tertandingi, memungkinkan pengembangan cepat dan desain antarmuka pengguna berkualitas tinggi. Saat SDFX bergerak menuju rilis sumber terbuka, panduan ini akan sangat berharga bagi pengembang yang ingin terlibat dengan platform profesional dan berpusat pada pengguna.
Nikmati berkreasi dengan SDFX, dan biarkan kesederhanaan dan kekuatan struktur JSON meningkatkan proses pengembangan aplikasi Anda.
Catatan: Saat ini, proses perancangan aplikasi SDFX dan pemetaan komponen UI ke parameter node dilakukan secara manual. Kami memahami seluk-beluknya dan dengan gembira mengumumkan bahwa rilis SDFX App Creator sudah dekat.
SDFX App Creator memungkinkan Anda membuat pemetaan UI dengan memperkenalkan antarmuka desain visual dengan kemampuan drag & drop. Ini akan sangat menyederhanakan proses menghubungkan kontrol UI dengan parameter node yang sesuai dalam grafik alur kerja. Nantikan fitur ini.
Pastikan sistem Anda memenuhi persyaratan berikut:
git clone https://github.com/sdfxai/sdfx.git
cd sdfx
Kemudian buka setup.bat
untuk menginstal dependensi
git clone https://github.com/sdfxai/sdfx.git
cd sdfx
./setup.sh
Untuk melakukan instalasi manual, ikuti langkah-langkah berikut:
Instal Ketergantungan Frontend:
Arahkan ke direktori src
SDFX dan instal dependensi npm:
cd src
npm install
cd ..
Kloning dan Instal ComfyUI:
Kloning repositori ComfyUI ke direktori root SDFX dari ComfyUI GitHub dan ikuti instruksi instalasi yang disediakan di readme untuk menginstal dependensi ComfyUI.
Tambahkan simpul khusus SDFXBridgeForComfyUI
Ikuti instruksi pada repositori node kustom SDFXBridgeForComfyUI untuk menambahkannya ke folder custom_nodes ComfyUi Anda.
Buat File Konfigurasi:
Buat file bernama sdfx.config.json
di root proyek Anda. Ikuti instruksi yang diberikan di sini untuk membuat file konfigurasi sesuai dengan kebutuhan Anda.
Berlari
Mulai ComfyUI Kemudian mulai SDFX dengan:
cd src
npm run start
Jika Anda sudah menginstal ComfyUI di mesin Anda, ikuti langkah-langkah berikut untuk mengintegrasikan SDFX:
Kloning custom_node SDFXBridgeForComfyUI di jalur custom_node ComfyUI Anda:
git clone https://github.com/sdfxai/SDFXBridgeForComfyUI.git
Untuk petunjuk detailnya, silakan merujuk ke SDFX resmi untuk ComfyUI README.
Instal dependensi front-end dan jalankan:
cd src
npm install
npm run start
Luncurkan aplikasi SDFX dengan run.bat
( ./run.sh
untuk Linux/MacOs)