Put more information about model gating and how to solve it

ui/src/app/jobs/new/SimpleJob.tsx

@@ -23,7 +23,8 @@ import {
   CreatableSelectInput,
 } from '@/components/formInputs';
 import Card from '@/components/Card';
-import { X, Copy, Wand2, SquareDashed } from 'lucide-react';
+import { X, Copy, Wand2, SquareDashed, Info } from 'lucide-react';
+import { openDoc } from '@/components/DocModal';
 import { openUpsamplePromptsModal, toAspectRatio } from '@/components/UpsamplePromptsModal';
 import { openPromptBoxEditor } from '@/components/PromptBoxEditorModal';
 import AddSingleImageModal, { openAddImageModal } from '@/components/AddSingleImageModal';
@@ -323,6 +324,59 @@ export default function SimpleJob({
                 placeholder=""
               />
             )}
+            {modelArch?.gateUrl && (
+              <div className="pt-2">
+                <button
+                  type="button"
+                  onClick={() => {
+                    const gateUrl = modelArch.gateUrl as string;
+                    openDoc({
+                      title: 'Gated Model',
+                      description: (
+                        <div className="space-y-3">
+                          <p>
+                            This model is gated on Huggingface. Before you can use it, you will need to accept the model
+                            terms on the model page:
+                          </p>
+                          <p>
+                            <a
+                              href={gateUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-blue-400 hover:text-blue-300 underline"
+                            >
+                              {gateUrl}
+                            </a>
+                          </p>
+                          <p>
+                            You will also need to create a Huggingface{' '}
+                            <a
+                              href="https://huggingface.co/settings/tokens"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-blue-400 hover:text-blue-300 underline"
+                            >
+                              read token
+                            </a>{' '}
+                            and add it on the{' '}
+                            <a href="/settings" className="text-blue-400 hover:text-blue-300 underline">
+                              settings page
+                            </a>
+                            .
+                          </p>
+                        </div>
+                      ),
+                    });
+                  }}
+                  className="w-full flex items-center gap-2 rounded-md bg-blue-950/60 border border-blue-800 px-3 py-2 text-sm text-blue-200 hover:bg-blue-900/60 text-left"
+                >
+                  <Info className="w-4 h-4 shrink-0 text-blue-400" />
+                  <span>
+                    Gated model. <span className="underline">Learn more.</span>
+                  </span>
+                </button>
+              </div>
+            )}
             {modelArch?.additionalSections?.includes('model.low_vram') && (
               <FormGroup label="Options">
                 <Checkbox

ui/src/app/jobs/new/options.ts

@@ -60,6 +60,7 @@ export interface ModelArch {
   additionalSections?: AdditionalSections[];
   accuracyRecoveryAdapters?: { [key: string]: string };
   sampleTags?: SampleTags;
+  gateUrl?: string;
 }
 
 const defaultNameOrPath = '';
@@ -101,6 +102,7 @@ export const modelArchs: ModelArch[] = [
       'config.process[0].train.noise_scheduler': ['flowmatch', 'flowmatch'],
     },
     disableSections: ['network.conv'],
+    gateUrl: 'https://huggingface.co/black-forest-labs/FLUX.1-dev',
   },
   {
     name: 'flux_kontext',
@@ -117,6 +119,7 @@ export const modelArchs: ModelArch[] = [
     },
     disableSections: ['network.conv'],
     additionalSections: ['datasets.control_path', 'sample.ctrl_img'],
+    gateUrl: 'https://huggingface.co/black-forest-labs/FLUX.1-Kontext-dev',
   },
   {
     name: 'flex1',
@@ -623,6 +626,7 @@ export const modelArchs: ModelArch[] = [
       'model.layer_offloading',
       'model.qie.match_target_res',
     ],
+    gateUrl: 'https://huggingface.co/black-forest-labs/FLUX.2-dev',
   },
   {
     name: 'zimage:turbo',
@@ -829,6 +833,7 @@ export const modelArchs: ModelArch[] = [
       'model.layer_offloading',
       'model.qie.match_target_res',
     ],
+    gateUrl: 'https://huggingface.co/black-forest-labs/FLUX.2-klein-base-9B',
   },
   {
     name: 'ace_step_15_xl',
@@ -1040,6 +1045,7 @@ export const modelArchs: ModelArch[] = [
       'model.unconditional_lora_path',
     ],
     hasMultiLinePrompts: true,
+    gateUrl: 'https://huggingface.co/ideogram-ai/ideogram-4-fp8',
   },
   {
     name: 'prx_pixel',
@@ -1066,6 +1072,7 @@ export const modelArchs: ModelArch[] = [
     name: 'krea2',
     label: 'Krea 2 (raw)',
     group: 'image',
+    gateUrl: 'https://huggingface.co/krea/Krea-2-Raw',
     defaults: {
       'config.process[0].model.name_or_path': ['krea/Krea-2-Raw', defaultNameOrPath],
       'config.process[0].model.quantize': [true, false],
@@ -1087,6 +1094,7 @@ export const modelArchs: ModelArch[] = [
     name: 'krea2:turbo',
     label: 'Krea 2 Turbo (w/ Training Adapter)',
     group: 'image',
+    gateUrl: 'https://huggingface.co/krea/Krea-2-Turbo',
     defaults: {
       'config.process[0].model.name_or_path': ['krea/Krea-2-Turbo', defaultNameOrPath],
       'config.process[0].model.quantize': [true, false],
@@ -1114,6 +1122,7 @@ export const modelArchs: ModelArch[] = [
   {
     name: 'krea2:o_edit',
     label: 'Krea 2 (raw) [Edit Training]',
+    gateUrl: 'https://huggingface.co/krea/Krea-2-Raw',
     group: 'experimental',
     defaults: {
       'config.process[0].model.name_or_path': ['krea/Krea-2-Raw', defaultNameOrPath],
@@ -1148,6 +1157,7 @@ export const modelArchs: ModelArch[] = [
   {
     name: 'krea2:o_edit_turbo',
     label: 'Krea 2 Turbo (w/ Training Adapter) [Edit Training]',
+    gateUrl: 'https://huggingface.co/krea/Krea-2-Turbo',
     group: 'experimental',
     defaults: {
       'config.process[0].model.name_or_path': ['krea/Krea-2-Turbo', defaultNameOrPath],