sdfx
1.0.0
Funktionen | Screenshots | SDFX-App-Leitfaden | Installation | Laufen
Die ultimative No-Code-Plattform zum Erstellen und Teilen von KI-Apps mit schöner Benutzeroberfläche.
Treten Sie unserer Discord Server-Community bei, um die neuesten Nachrichten, Video-Tutorials und Demo-Apps zu erhalten.
SDFX ermöglicht die Erstellung unkomplizierter Benutzeroberflächen für komplexe Arbeitsabläufe. Eine SDFX-Anwendung kombiniert einen komfortablen Workflow mit einer Benutzeroberfläche. Der JSON, der den Workflow beschreibt, wird mit zusätzlichen Metainformationen über die Anwendung und ihren Autor sowie die Zuordnung zwischen UI-Komponenten und Knoten-Widgets angereichert.
Merkmale
Screenshots
JSON-Strukturhandbuch für SDFX-Anwendungen
Installation
Laufen
Installation für Benutzer, die ComfyUI bereits lokal verwenden
Dieses Projekt wurde ursprünglich erstellt, um die Bedürfnisse von Benutzern von A1111 (formularbasierte Benutzeroberfläche) und ComfyUI (graphknotenbasiert) zu erfüllen, bei denen es sich um zwei Communities mit unterschiedlichen Visionen handelt. Mit SDFX wollten wir die Vorteile beider Welten ohne die Nachteile vereinen. Was SDFX beispielsweise ermöglicht, ist die Erstellung komplexer Diagramme (wie man es mit ComfyUI tun würde), jedoch mit einer Überlagerung einer einfacheren, übergeordneten Benutzeroberfläche (z. B. einer formularbasierten Schnittstelle mit einer unglaublichen Benutzeroberfläche). Theoretisch könnte also jemand A1111 mit SDFX neu erstellen und den JSON online teilen.
Dies ist ein erster Entwurf, es gibt noch viel zu tun (hauptsächlich der App Creator, der bald veröffentlicht wird). Einige hatten das Vertrauen in uns verloren und nannten uns sogar „Vaporware“. Die Realität ist, wie Sie beim Durchsuchen des Quellcodes sehen werden, dass SDFX einen erheblichen Arbeitsaufwand erforderte. Es wurde von einem Solo-Entwickler erstellt und jetzt wächst das Team. Wir haben versucht, die Dinge richtig zu machen und uns ausschließlich auf das zu konzentrieren, was wir am besten können: Benutzeroberflächen und Produktdesign mit einem modernen Frontend-Stack. Daher verlassen wir uns zu 100 % auf das Backend von Comfy, wodurch SDFX vollständig mit ComfyUI kompatibel ist. Die Installation von ComfyUI ist jedoch nicht notwendig, da alles abstrahiert ist. Wir haben uns auch bemüht, den Installationsprozess zu vereinfachen. In den meisten Fällen müssen Sie lediglich auf setup.bat / setup.sh doppelklicken und dem Assistenten folgen.
Wir hoffen, dass es Ihnen gefällt, und es ist uns eine große Freude, unsere Vision und dieses Repo mit Ihnen zu teilen, in der Hoffnung, dass es den Weg für viele Beiträge von Ihnen ebnet, um die Weiterentwicklung des Open-Source-KI-Bereichs voranzutreiben.
 |  |
|---|
Willkommen beim JSON-Strukturleitfaden für SDFX-Anwendungen. Im Folgenden finden Sie eine umfassende Übersicht für Entwickler, die das JSON-Format verstehen und nutzen möchten, um eine benutzerfreundliche Benutzeroberfläche mit SDFX zu erstellen. Unser Ziel ist es, Klarheit und Benutzerfreundlichkeit zu gewährleisten, damit Sie SDFX-Apps sicher integrieren und austauschen können.
{
"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 : Der Name, den Sie Ihrer Bewerbung zuweisen.meta : Dieser Schlüssel enthält wichtige Details zu Ihrer Bewerbung, zum Beispiel: - ` 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 : Dieser als "sdfx" bezeichnete Schlüssel identifiziert die App als SDFX-Anwendung und behält gleichzeitig die Kompatibilität mit ComfyUI bei. Das bedeutet, dass SDFX-Apps per Drag & Drop auf ComfyUI gezogen werden können und umgekehrt.mapping : Gibt die UI-Struktur an. Innerhalb der Zuordnung finden Sie möglicherweise die folgende Struktur zur Beschreibung einer Tab-Komponente mit einem Checkpoint-Loader, die vollständig mit Tailwind-CSS-Klassen kompatibel ist: {
"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 ]
}
}
]
}
]
}
]
}Entwickler können einen umfangreichen Satz an UI-Komponenten zum Erstellen von Benutzeroberflächen nutzen. Hier ist eine Liste der verfügbaren Komponenten, die mit VueJS und Tailwind CSS verwendet und angepasst werden können:
ButtonDragNumberImageLoaderInputModelPickerNumberPreviewPromptPromptTimelineSelectorSliderTextAreaToggleBoxDimensionsBoxSeed Darüber hinaus können HTML-Elemente wie div , p , ul , li , img , iframe , video und mehr verwendet werden, um die Benutzeroberfläche zu bereichern.
Für Layout und Strukturdesign bieten Elemente wie SplitPane , SplitH , SplitV , Tab , TabBox , TabBar und ToggleSettings weitere Anpassungsmöglichkeiten.
Die einfache Erstellung neuer Komponenten mit VueJS und Tailwind CSS ist unübertroffen und ermöglicht eine schnelle Entwicklung und ein hochwertiges Benutzeroberflächendesign. Während sich SDFX in Richtung einer Open-Source-Version bewegt, wird dieser Leitfaden für Entwickler von unschätzbarem Wert sein, die eine professionelle und benutzerorientierte Plattform anstreben.
Genießen Sie das Erstellen mit SDFX und lassen Sie die Einfachheit und Leistungsfähigkeit der JSON-Struktur Ihren Anwendungsentwicklungsprozess verbessern.
Hinweis: Derzeit erfolgt der Entwurf Ihrer SDFX-Anwendung und die Zuordnung von UI-Komponenten zu Knotenparametern manuell. Wir verstehen die damit verbundenen Feinheiten und freuen uns, Ihnen mitteilen zu können, dass die Veröffentlichung des SDFX App Creator in Sicht ist.
Mit dem SDFX App Creator können Sie Ihre UI-Zuordnung erstellen, indem Sie eine visuelle Designoberfläche mit Drag & Drop-Funktionen einführen. Dadurch wird der Prozess der Verknüpfung von UI-Steuerelementen mit den entsprechenden Knotenparametern im Workflow-Diagramm erheblich vereinfacht. Seien Sie gespannt auf diese Funktion.
Stellen Sie sicher, dass Ihr System die folgenden Anforderungen erfüllt:
git clone https://github.com/sdfxai/sdfx.git
cd sdfx Öffnen Sie dann setup.bat um Abhängigkeiten zu installieren
git clone https://github.com/sdfxai/sdfx.git
cd sdfx
./setup.shUm eine manuelle Installation durchzuführen, gehen Sie folgendermaßen vor:
Frontend-Abhängigkeiten installieren:
Navigieren Sie zum src Verzeichnis von SDFX und installieren Sie die npm-Abhängigkeiten:
cd src
npm install
cd ..ComfyUI klonen und installieren:
Klonen Sie das ComfyUI-Repository in das Stammverzeichnis von SDFX von ComfyUI GitHub und befolgen Sie die Installationsanweisungen in der Readme-Datei, um ComfyUI-Abhängigkeiten zu installieren.
Fügen Sie den benutzerdefinierten Knoten SDFXBridgeForComfyUI hinzu
Befolgen Sie die Anweisungen im Repository des benutzerdefinierten Knotens SDFXBridgeForComfyUI, um ihn Ihrem ComfyUi-Ordner „custom_nodes“ hinzuzufügen.
Konfigurationsdatei erstellen:
Erstellen Sie eine Datei mit dem Namen sdfx.config.json im Stammverzeichnis Ihres Projekts. Befolgen Sie die hier bereitgestellten Anweisungen, um die Konfigurationsdatei entsprechend Ihren Anforderungen zu erstellen.
Laufen
Starten Sie ComfyUI. Starten Sie dann SDFX mit:
cd src
npm run startWenn Sie ComfyUI bereits auf Ihrem Computer installiert haben, befolgen Sie diese Schritte, um SDFX zu integrieren:
Klonen Sie den SDFXBridgeForComfyUI custom_node in Ihrem ComfyUI custom_node-Pfad:
git clone https://github.com/sdfxai/SDFXBridgeForComfyUI.gitAusführliche Anweisungen finden Sie in der offiziellen SDFX für ComfyUI README.
Installieren Sie Front-End-Abhängigkeiten und führen Sie es aus:
cd src
npm install
npm run start Starten Sie die SDFX-App mit run.bat ( ./run.sh für Linux/MacOs)
