sdfx
1.0.0
特長 |スクリーンショット | SDFX アプリガイド |インストール |走る
美しい UI を備えた AI アプリを構築して共有するための究極のノーコード プラットフォーム。
最新ニュース、ビデオチュートリアル、デモアプリを入手するには、Discord サーバーコミュニティに参加してください。
SDFX を使用すると、複雑なワークフローに対応する簡単なユーザー インターフェイスを作成できます。 SDFX アプリケーションは、Comfy ワークフローとユーザー インターフェイスを組み合わせたものです。ワークフローを記述する JSON には、アプリケーションとその作成者に関する追加のメタ情報、および UI コンポーネントとノード ウィジェット間の関連付けが強化されています。
特徴
スクリーンショット
SDFX アプリケーション JSON 構造ガイド
インストール
走る
すでに ComfyUI Locally を使用しているユーザー向けのインストール
このプロジェクトはもともと、異なるビジョンを持つ 2 つのコミュニティである A1111 (フォームベースの UI) と ComfyUI (グラフノードベース) のユーザーのニーズを満たすために作成されました。 SDFX では、欠点をなくし、両方の利点を融合することを目指しました。たとえば、SDFX で可能になるのは、(ComfyUI で行うような) 複雑なグラフの作成ですが、よりシンプルで高レベルの UI (素晴らしい UI を備えたフォームベースのインターフェイスなど) のオーバーレイを使用します。したがって、理論的には、誰かが SDFX を使用して A1111 を再作成し、JSON をオンラインで共有することができます。
これは初期のドラフトであり、やるべきことはまだたくさんあります (主に近々リリースされる App Creator)。私たちに対する信頼を失い、ヴェイパーウェアとさえ呼ぶ人もいました。実際、ソース コードを参照するとわかるように、SDFX にはかなりの作業が必要でした。これは個人の開発者によって作成されましたが、現在チームは成長しています。私たちは、最新のフロントエンド スタックを備えた UI と製品デザインという、私たちが最も得意とすることだけに焦点を当て、物事を正しく行うよう努めました。したがって、当社は Comfy のバックエンドに 100% 依存しており、SDFX を ComfyUI と完全に互換性を持たせています。ただし、すべてが抽象化されているため、ComfyUI をインストールする必要はありません。また、インストールプロセスの簡素化にも努めました。ほとんどの場合、setup.bat / setup.sh をダブルクリックしてウィザードに従うだけで済みます。
皆様に気に入っていただけることを願っております。また、私たちのビジョンとこのリポジトリを皆様と共有できることを大変うれしく思います。このリポジトリが、オープンソース AI 分野のさらなる進歩に向けて、皆様からの多くの貢献への道を切り開くことを願っています。
 |  |
|---|
SDFX アプリケーションの JSON 構造ガイドへようこそ。以下は、SDFX を使用してユーザー フレンドリーな UI を作成するために 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"として指定されるこのキーは、ComfyUI との互換性を維持しながら、アプリを SDFX アプリケーションとして識別します。つまり、SDFX アプリを ComfyUI にドラッグ アンド ドロップでき、その逆も可能です。mapping : UI 構造を指定します。マッピング内には、Tailwind CSS クラスと完全に互換性のあるチェックポイント ローダーを備えた Tab コンポーネントを記述する次の構造が見つかる場合があります。 {
"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 ]
}
}
]
}
]
}
]
}開発者は、豊富な UI コンポーネントのセットを利用してユーザー インターフェイスを作成できます。 VueJS および Tailwind CSS で使用およびカスタマイズできる利用可能なコンポーネントのリストは次のとおりです。
ButtonDragNumberImageLoaderInputModelPickerNumberPreviewPromptPromptTimelineSelectorSliderTextAreaToggleBoxDimensionsBoxSeedさらに、 div 、 p 、 ul 、 li 、 img 、 iframe 、 videoなどの HTML 要素を使用して、ユーザー インターフェイスを強化できます。
レイアウトと構造設計では、 SplitPane 、 SplitH 、 SplitV 、 Tab 、 TabBox 、 TabBar 、 ToggleSettingsなどの要素を使用してさらにカスタマイズできます。
VueJS と Tailwind CSS を使用した新しいコンポーネントの作成の容易さは比類のないもので、迅速な開発と高品質のユーザー インターフェイス設計が可能になります。 SDFX がオープンソース リリースに向けて移行しているため、このガイドは、プロフェッショナルでユーザー中心のプラットフォームに取り組むことを期待している開発者にとって非常に貴重なものになります。
SDFX での作成を楽しみ、JSON 構造のシンプルさと強力さでアプリケーション開発プロセスを強化しましょう。
注:現在、SDFX アプリケーションを設計し、UI コンポーネントをノード パラメーターにマッピングするプロセスは手動です。私たちは、これに伴う複雑さを理解しており、SDFX App Creator のリリースが近づいていることを発表できることをうれしく思っています。
SDFX App Creator を使用すると、ドラッグ アンド ドロップ機能を備えたビジュアル デザイン インターフェイスを導入して、UI マッピングを作成できます。これにより、UI コントロールをワークフロー グラフ内の対応するノード パラメーターにリンクするプロセスが大幅に簡素化されます。この機能については今しばらくお待ちください。
システムが次の要件を満たしていることを確認してください。
git clone https://github.com/sdfxai/sdfx.git
cd sdfx次に、 setup.batを開いて依存関係をインストールします。
git clone https://github.com/sdfxai/sdfx.git
cd sdfx
./setup.sh手動インストールを実行するには、次の手順に従います。
フロントエンドの依存関係をインストールします。
SDFX のsrcディレクトリに移動し、npm 依存関係をインストールします。
cd src
npm install
cd ..ComfyUI をクローンしてインストールします。
ComfyUI GitHub から SDFX のルート ディレクトリに ComfyUI リポジトリのクローンを作成し、Readme に記載されているインストール手順に従って ComfyUI の依存関係をインストールします。
カスタム ノード SDFXBridgeForComfyUI を追加します
カスタム ノード SDFXBridgeForComfyUI のリポジトリの指示に従って、それを ComfyUi Custom_nodes フォルダーに追加します。
設定ファイルを作成します。
プロジェクトのルートにsdfx.config.jsonという名前のファイルを作成します。ここに記載されている手順に従って、要件に応じて構成ファイルを構築します。
走る
ComfUI を開始します。次に、次のコマンドで SDFX を開始します。
cd src
npm run startすでに ComfyUI がマシンにインストールされている場合は、次の手順に従って SDFX を統合します。
ComfyUI カスタムノード パス上に SDFXBridgeForComfyUI カスタムノードのクローンを作成します。
git clone https://github.com/sdfxai/SDFXBridgeForComfyUI.git詳細な手順については、ComfyUI の公式 SDFX README を参照してください。
フロントエンドの依存関係をインストールして実行します。
cd src
npm install
npm run startrun.batで SDFX アプリを起動します (Linux/MacO の場合は./run.sh )。
