sdfx

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

SDFX

คุณสมบัติ | ภาพหน้าจอ | คู่มือแอป SDFX | การติดตั้ง | วิ่ง

สุดยอดแพลตฟอร์มที่ไม่มีโค้ดสำหรับสร้างและแชร์แอป AI ด้วย UI ที่สวยงาม

เข้าร่วมชุมชนเซิร์ฟเวอร์ Discord ของเราเพื่อรับข่าวสารล่าสุด วิดีโอแนะนำการใช้งาน และแอปสาธิต

ภาพหน้าจอของ SDFX

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

คุณสมบัติ
ภาพหน้าจอ
คู่มือโครงสร้าง JSON ของแอปพลิเคชัน SDFX
การติดตั้ง
วิ่ง
การติดตั้งสำหรับผู้ใช้ที่ใช้ ComfyUI Locally อยู่แล้ว

ทำไม

เดิมโปรเจ็กต์นี้ถูกสร้างขึ้นเพื่อตอบสนองความต้องการของผู้ใช้จาก A1111 (UI ตามแบบฟอร์ม) และ ComfyUI (ตามโหนดกราฟ) ซึ่งเป็นสองชุมชนที่มีวิสัยทัศน์ที่แตกต่างกัน ด้วย SDFX เรามุ่งหวังที่จะผสานประโยชน์ของทั้งสองโลกเข้าด้วยกันโดยไม่มีข้อเสีย ตัวอย่างเช่น สิ่งที่ SDFX อนุญาตคือการสร้างกราฟที่ซับซ้อน (เช่นเดียวกับที่ทำบน ComfyUI) แต่มีการซ้อนทับของ UI ระดับสูงที่เรียบง่ายกว่า (เช่นอินเทอร์เฟซตามแบบฟอร์มพร้อม UI ที่น่าทึ่ง) ตามทฤษฎีแล้ว บางคนสามารถสร้าง A1111 ขึ้นใหม่ด้วย SDFX และแชร์ JSON ออนไลน์ได้

นี่เป็นฉบับร่างเบื้องต้น ยังมีสิ่งที่ต้องทำอีกมาก (ส่วนใหญ่เป็น App Creator ที่จะเปิดตัวเร็วๆ นี้) บางคนหมดศรัทธาในตัวเรา กระทั่งเรียกเราว่าไอระเหยด้วยซ้ำ ความจริงดังที่คุณจะเห็นจากการเรียกดูซอร์สโค้ดก็คือ SDFX ต้องการงานจำนวนมาก มันถูกสร้างขึ้นโดยนักพัฒนาเดี่ยว และตอนนี้ทีมก็กำลังเติบโต เราพยายามทำสิ่งที่ถูกต้องโดยมุ่งเน้นไปที่สิ่งที่เราทำได้ดีที่สุดเท่านั้น: UI และการออกแบบผลิตภัณฑ์พร้อมสแต็กส่วนหน้าที่ทันสมัย ดังนั้นเราจึงไว้วางใจแบ็คเอนด์ของ Comfy 100% ทำให้ SDFX เข้ากันได้กับ ComfyUI อย่างสมบูรณ์ อย่างไรก็ตาม ไม่จำเป็นต้องติดตั้ง ComfyUI เนื่องจากทุกอย่างถูกแยกออกมาแล้ว นอกจากนี้เรายังพยายามทำให้กระบวนการติดตั้งง่ายขึ้น ในกรณีส่วนใหญ่ คุณจะต้องดับเบิลคลิกที่ setup.bat / setup.sh แล้วทำตามตัวช่วยสร้าง

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

คุณสมบัติ

สร้างและแชร์แอปที่ใช้งานง่ายนอกเหนือจากขั้นตอนการทำงานที่ซับซ้อน
เข้ากันได้กับ ComfyUI และฟีเจอร์ทั้งหมดได้ 100%
สามารถทำงานร่วมกับการติดตั้ง Comfy ที่คุณมีอยู่ได้ (ด้วยโหนดที่กำหนดเอง SDFXBridgeForComfy ของเรา)
LiteGraph เกือบจะได้รับการปรับโครงสร้างใหม่ตั้งแต่ต้นใน typescript
การนำทางกราฟแบบเคลื่อนไหว
บุ๊กมาร์กโหนดและการค้นหากราฟขั้นสูง
การสร้าง UI ที่รวดเร็วปานสายฟ้าและส่วนประกอบระดับสูงที่สวยงาม (เร็วกว่า Gradio 450 เท่า)
UI Debugger (เบื้องต้นสำหรับตอนนี้)
Native Custom Nodes Manager (ขอบคุณ Dr.Lt.Data)
ส่งออกและแชร์แอปและเทมเพลต (โหนดกลุ่มจะส่งออกเร็วๆ นี้)
โปรแกรมแก้ไขรูปภาพและมาสก์ตามเลเยอร์ขั้นสูง (WIP)
ตัวเลือกด่านและแกลเลอรีขั้นสูง
ตัวเลือกรูปภาพอินพุตขั้นสูง
สแต็กส่วนหน้าที่ทันสมัยและรวดเร็วเป็นพิเศษ (vitejs, vuejs, อิเล็กตรอน)
คอมไพล์เป็นแอปเนทีฟ (Windows, Linux, Mac) หรือเป็นเว็บแอป
ง่ายต่อการบำรุงรักษาและเพิ่มคุณสมบัติใหม่

ภาพหน้าจอ

มุมมองกราฟ

ภาพหน้าจอของ SDFX

มุมมองแอป

คอมโพเนนต์ไทม์ไลน์พร้อมท์

ภาพหน้าจอของ SDFX

ดีบักเกอร์ UI

ภาพหน้าจอของ SDFX

บุ๊กมาร์กโหนด

ภาพหน้าจอของ SDFX

ผู้จัดการฐาน

ภาพหน้าจอของ SDFX

คู่มือโครงสร้าง JSON ของแอปพลิเคชัน SDFX

ยินดีต้อนรับสู่คู่มือโครงสร้าง JSON สำหรับแอปพลิเคชัน SDFX ต่อไปนี้เป็นภาพรวมที่ครอบคลุมสำหรับนักพัฒนาที่ต้องการทำความเข้าใจและใช้รูปแบบ JSON เพื่อสร้าง UI ที่ใช้งานง่ายด้วย SDFX เป้าหมายของเราคือการรับรองความชัดเจนและความสะดวกในการใช้งาน ดังนั้นคุณจึงสามารถบูรณาการและแลกเปลี่ยนแอป SDFX ได้อย่างมั่นใจ

โครงสร้าง JSON พื้นฐานของแอป SDFX:

{
  "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 : ชื่อที่คุณกำหนดให้กับแอปพลิเคชันของคุณ

ข้อมูลเมตา

meta : คีย์นี้จะเก็บรายละเอียดที่จำเป็นเกี่ยวกับการสมัครของคุณ เช่น:

 - ` 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 : กำหนดเป็น "sdfx" คีย์นี้ระบุแอปเป็นแอปพลิเคชัน SDFX ในขณะที่ยังคงความเข้ากันได้กับ ComfyUI ซึ่งหมายความว่าสามารถลากและวางแอป SDFX ลงบน ComfyUI และในทางกลับกันได้

โครงสร้างการแมป UI

mapping : ระบุโครงสร้าง UI ภายในการแมป คุณอาจพบโครงสร้างต่อไปนี้เพื่ออธิบายองค์ประกอบ Tab ด้วยตัวโหลดจุดตรวจสอบ ซึ่งเข้ากันได้กับคลาส Tailwind CSS อย่างสมบูรณ์:

{
  "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 ]
              }
            }
          ]
        }
      ]
    }
  ]
}

ปุ่ม LiteGraph

คีย์ที่เหลือเป็นคุณสมบัติ LiteGraph มาตรฐานที่ใช้อธิบายเวิร์กโฟลว์

ส่วนประกอบ UI สำหรับการแมป

นักพัฒนาสามารถใช้ประโยชน์จากชุดส่วนประกอบ UI ที่หลากหลายสำหรับการสร้างส่วนต่อประสานกับผู้ใช้ ต่อไปนี้เป็นรายการส่วนประกอบที่สามารถใช้ได้ซึ่งสามารถใช้และปรับแต่งด้วย VueJS และ Tailwind CSS:

Button
DragNumber
ImageLoader
Input
ModelPicker
Number
Preview
Prompt
PromptTimeline
Selector
Slider
TextArea
Toggle
BoxDimensions
BoxSeed

นอกจากนี้ องค์ประกอบ HTML เช่น div , p , ul , li , img , iframe , video และอื่นๆ ยังสามารถใช้เพื่อเสริมอินเทอร์เฟซผู้ใช้ได้

สำหรับเค้าโครงและการออกแบบโครงสร้าง องค์ประกอบต่างๆ เช่น SplitPane , SplitH , SplitV , Tab , TabBox , TabBar และ ToggleSettings นำเสนอการปรับแต่งเพิ่มเติม

ความง่ายในการสร้างส่วนประกอบใหม่ด้วย VueJS และ Tailwind CSS นั้นไม่มีใครเทียบได้ ช่วยให้สามารถพัฒนาได้อย่างรวดเร็วและออกแบบอินเทอร์เฟซผู้ใช้คุณภาพสูง ในขณะที่ SDFX ก้าวไปสู่การเปิดตัวโอเพ่นซอร์ส คู่มือนี้จะมีคุณค่าอย่างยิ่งสำหรับนักพัฒนาที่คาดหวังที่จะมีส่วนร่วมกับแพลตฟอร์มระดับมืออาชีพและผู้ใช้เป็นศูนย์กลาง

เพลิดเพลินกับการสร้างสรรค์ด้วย SDFX และปล่อยให้ความเรียบง่ายและประสิทธิภาพของโครงสร้าง JSON ปรับปรุงกระบวนการพัฒนาแอปพลิเคชันของคุณ

คุณสมบัติที่จะเกิดขึ้น: ผู้สร้างแอป SDFX

หมายเหตุ: ในปัจจุบัน กระบวนการออกแบบแอปพลิเคชัน SDFX ของคุณและการแมปส่วนประกอบ UI กับพารามิเตอร์โหนดนั้นเป็นการดำเนินการด้วยตนเอง เราเข้าใจถึงความซับซ้อนที่เกี่ยวข้องและรู้สึกตื่นเต้นที่จะประกาศว่าการเปิดตัว SDFX App Creator นั้นใกล้จะเกิดขึ้นแล้ว

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

การติดตั้ง

ตรวจสอบให้แน่ใจว่าระบบของคุณตรงตามข้อกำหนดต่อไปนี้:

โหนด js เวอร์ชัน 18.9.1
npm เวอร์ชัน 8.19.1
หลาม 3.11
คอมไพล์

หน้าต่าง

  git clone https://github.com/sdfxai/sdfx.git
  cd sdfx

จากนั้นเปิด setup.bat เพื่อติดตั้งการอ้างอิง

เกิดข้อผิดพลาดแจ้งว่าไม่มี Python แต่ติดตั้งแล้วใช่ไหม

ข้อผิดพลาดทั่วไปคือการลืมตรวจสอบตัวเลือกในการเพิ่ม Python ให้กับ PATH ระหว่างการติดตั้ง เนื่องจากมักจะไม่ถูกตรวจสอบตามค่าเริ่มต้นในวิซาร์ดการติดตั้ง ตรวจสอบให้แน่ใจว่าเพิ่ม Python ให้กับตัวแปรสภาพแวดล้อมของระบบของคุณแล้วเพื่อให้รันสคริปต์ได้อย่างราบรื่น

ภาพหน้าจอของ SDFX

Linux/MacO

  git clone https://github.com/sdfxai/sdfx.git
  cd sdfx
  ./setup.sh

ติดตั้งด้วยตนเอง

คลิกเพื่อขยาย

เมื่อต้องการทำการติดตั้งด้วยตนเอง ให้ทำตามขั้นตอนเหล่านี้:

ติดตั้งการพึ่งพาส่วนหน้า:
นำทางไปยังไดเร็กทอรี src ของ SDFX และติดตั้งการพึ่งพา npm:
```
 cd src
npm install
cd ..
```
โคลนและติดตั้ง ComfyUI:
โคลนพื้นที่เก็บข้อมูล ComfyUI ลงในไดเร็กทอรีรากของ SDFX จาก ComfyUI GitHub และปฏิบัติตามคำแนะนำในการติดตั้งที่ให้ไว้ใน readme เพื่อติดตั้งการขึ้นต่อกันของ ComfyUI
เพิ่มโหนดแบบกำหนดเอง SDFXBridgeForComfyUI
ทำตามคำแนะนำบนที่เก็บของโหนดแบบกำหนดเอง SDFXBridgeForComfyUI เพื่อเพิ่มลงในโฟลเดอร์ ComfyUi custom_nodes ของคุณ
สร้างไฟล์การกำหนดค่า:
สร้างไฟล์ชื่อ sdfx.config.json ที่รากของโปรเจ็กต์ของคุณ ทำตามคำแนะนำที่ให้ไว้ที่นี่เพื่อสร้างไฟล์การกำหนดค่าตามความต้องการของคุณ
วิ่ง
เริ่ม ComfyUI จากนั้นเริ่ม SDFX ด้วย:
```
  cd src
  npm run start
```

การติดตั้งสำหรับผู้ใช้ที่ใช้ ComfyUI Locally อยู่แล้ว

คลิกเพื่อขยาย

หากคุณได้ติดตั้ง ComfyUI บนเครื่องของคุณแล้ว ให้ทำตามขั้นตอนเหล่านี้เพื่อรวม SDFX:

โคลน SDFXBridgeForComfyUI custom_node บนเส้นทาง ComfyUI custom_node ของคุณ:
```
git clone https://github.com/sdfxai/SDFXBridgeForComfyUI.git
```
สำหรับคำแนะนำโดยละเอียด โปรดดูที่ SDFX อย่างเป็นทางการสำหรับ ComfyUI README
ติดตั้งการพึ่งพาส่วนหน้าและรัน: