interactive-gallery.json

[
    {
        "id": "vscode",
        "interactive_type": "vscode",
        "name": "VS Code",
        "description": "Remote VS Code development environment via tunnel",
        "github_repo_url": "https://github.com/transformerlab/transformerlab-examples",
        "github_repo_dir": "interactive-vscode",
        "env_parameters": [],
        "icon": "https://lab.cloud/img/icons/vscode.png",
        "supported_accelerators": [
            "cpu",
            "NVIDIA",
            "AMD"
        ],
        "remoteOnly": true,
        "_comment_ports": "VS Code tunnel does not expose fixed local ports; the tunnel URL is generated dynamically by the VS Code CLI.",
        "ports": [],
        "modal_title": "VS Code Interactive Session",
        "modal_subtitle": "Follow the steps below to authenticate and open your VS Code session.",
        "instructions": [
            {
                "kind": "code",
                "title": "Step 1: Authorize VS Code",
                "description": "When the VS Code service starts, it may print an authorization code. Copy the code below (when available), go to https://github.com/login/device and complete the sign-in flow in your browser.",
                "value_key": "auth_code",
                "placeholder": "Waiting for auth code from provider logs...",
                "help_links": [
                    {
                        "label": "https://github.com/login/device",
                        "href": "https://github.com/login/device"
                    }
                ]
            },
            {
                "kind": "url",
                "title": "Step 2: Open VS Code",
                "description": "After you finish authorization, the URL will appear here. Use it to open the remote environment in your browser-based VS Code.",
                "value_key": "tunnel_url",
                "placeholder": "Waiting for VS Code to print a URL in the provider logs..."
            }
        ]
    },
    {
        "id": "jupyter",
        "interactive_type": "jupyter",
        "name": "Jupyter Notebook",
        "description": "Jupyter Lab notebook environment via ngrok tunnel",
        "github_repo_url": "https://github.com/transformerlab/transformerlab-examples",
        "github_repo_dir": "interactive-jupyter",
        "env_parameters": [
            {
                "field_name": "ngrok Auth Token",
                "env_var": "NGROK_AUTH_TOKEN",
                "field_type": "str",
                "required": true,
                "placeholder": "ngrok_...",
                "help_text": "Your ngrok authentication token. You can get your token from https://dashboard.ngrok.com/get-started/your-authtoken.",
                "password": true
            }
        ],
        "icon": "https://lab.cloud/img/icons/jupyter.png",
        "supported_accelerators": [
            "cpu",
            "NVIDIA",
            "AMD",
            "AppleSilicon"
        ],
        "_comment_ports": "Jupyter Lab listens on port 8888. The ngrok tunnel exposes this port externally.",
        "ports": [
            {
                "port": 8888,
                "label": "Jupyter Lab",
                "protocol": "http"
            }
        ],
        "url_patterns": [
            {
                "value_key": "jupyter_url",
                "regex": "(https?://(?:localhost|127\\.0\\.0\\.1|0\\.0\\.0\\.0):8888[^\\s]*)",
                "group": 1
            }
        ],
        "modal_title": "Jupyter Notebook Interactive Session",
        "modal_subtitle": "Access your Jupyter notebook through the URL below.",
        "instructions": [
            {
                "kind": "url",
                "title": "Access Jupyter Notebook",
                "description": "Once ready, click the link below to open your Jupyter notebook in your browser.",
                "value_key": "jupyter_url",
                "placeholder": "Waiting for service to start. The URL will appear here once the connection is available..."
            }
        ]
    },
    {
        "id": "vllm",
        "interactive_type": "vllm",
        "name": "vLLM Server",
        "description": "vLLM OpenAI-compatible API server via ngrok tunnel (plus Open WebUI)",
        "github_repo_url": "https://github.com/transformerlab/transformerlab-examples",
        "github_repo_dir": "interactive-vllm",
        "env_parameters": [
            {
                "field_name": "Model Name",
                "env_var": "MODEL_NAME",
                "field_type": "str",
                "required": true,
                "placeholder": "e.g. meta-llama/Llama-2-7b-chat-hf",
                "help_text": "HuggingFace model identifier"
            },
            {
                "field_name": "Tensor Parallel Size",
                "env_var": "TP_SIZE",
                "field_type": "integer",
                "required": true,
                "placeholder": "1",
                "help_text": "Number of GPUs for tensor parallelism (default: 1)"
            },
            {
                "field_name": "HuggingFace Token",
                "env_var": "HF_TOKEN",
                "field_type": "str",
                "required": false,
                "placeholder": "hf_...",
                "help_text": "Optional: Required for private/gated models",
                "password": true
            },
            {
                "field_name": "ngrok Auth Token",
                "env_var": "NGROK_AUTH_TOKEN",
                "field_type": "str",
                "required": true,
                "placeholder": "ngrok_...",
                "help_text": "Your ngrok authentication token. You can get your token from https://dashboard.ngrok.com/get-started/your-authtoken.",
                "password": true
            }
        ],
        "supported_accelerators": [
            "NVIDIA",
            "AMD"
        ],
        "icon": "https://lab.cloud/img/icons/vllm.png",
        "_comment_ports": "vLLM API on 8000, Open WebUI on 8080. Both tunneled via ngrok.",
        "ports": [
            {
                "port": 8000,
                "label": "vLLM API",
                "protocol": "http"
            },
            {
                "port": 8080,
                "label": "Open WebUI",
                "protocol": "http"
            }
        ],
        "url_patterns": [
            {
                "value_key": "vllm_url",
                "regex": "(https?://(?:localhost|127\\.0\\.0\\.1|0\\.0\\.0\\.0):8000[^\\s]*)",
                "group": 1
            },
            {
                "value_key": "openwebui_url",
                "regex": "(https?://(?:localhost|127\\.0\\.0\\.1|0\\.0\\.0\\.0):8080[^\\s]*)",
                "group": 1
            }
        ],
        "modal_title": "vLLM Server Interactive Session",
        "modal_subtitle": "Access your vLLM API server through the URL below.",
        "instructions": [
            {
                "kind": "url",
                "title": "Access vLLM API Server",
                "description": "Once ready, use the URL below to access your vLLM server. The vLLM server provides an OpenAI-compatible API endpoint.",
                "value_key": "vllm_url",
                "placeholder": "Waiting for service to start. The URL will appear here once the connection is available...",
                "example_template": "curl {{vllm_url}}/v1/completions \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\n    \"model\": \"your-model-name\",\n    \"prompt\": \"Hello, world!\",\n    \"max_tokens\": 50\n  }'"
            },
            {
                "kind": "url",
                "title": "Access Open WebUI",
                "description": "Use the URL below to open Open WebUI connected to this vLLM server. This provides a browser-based chat UI backed by the same vLLM API.",
                "value_key": "openwebui_url",
                "placeholder": "Waiting for the Open WebUI service to start..."
            }
        ]
    },
    {
        "id": "ollama",
        "interactive_type": "ollama",
        "name": "Ollama + Open WebUI",
        "description": "Ollama model server with Open WebUI chat interface via ngrok tunnel",
        "github_repo_url": "https://github.com/transformerlab/transformerlab-examples",
        "github_repo_dir": "interactive-ollama-openwebui",
        "env_parameters": [
            {
                "field_name": "Model Name",
                "env_var": "MODEL_NAME",
                "field_type": "str",
                "required": true,
                "placeholder": "e.g. llama2, mistral, codellama",
                "help_text": "Ollama model name (e.g. llama2, mistral, codellama). Use \"ollama pull <model>\" to download models."
            },
            {
                "field_name": "ngrok Auth Token",
                "env_var": "NGROK_AUTH_TOKEN",
                "field_type": "str",
                "required": true,
                "placeholder": "ngrok_...",
                "help_text": "Your ngrok authentication token. You can get your token from https://dashboard.ngrok.com/get-started/your-authtoken.",
                "password": true
            }
        ],
        "icon": "https://lab.cloud/img/icons/ollama.png",
        "supported_accelerators": [
            "cpu",
            "NVIDIA",
            "AMD",
            "AppleSilicon"
        ],
        "_comment_ports": "Ollama API on 11434, Open WebUI on 8080. Both tunneled via ngrok.",
        "ports": [
            {
                "port": 11434,
                "label": "Ollama API",
                "protocol": "http"
            },
            {
                "port": 8080,
                "label": "Open WebUI",
                "protocol": "http"
            }
        ],
        "url_patterns": [
            {
                "value_key": "ollama_url",
                "regex": "(https?://(?:localhost|127\\.0\\.0\\.1|0\\.0\\.0\\.0):11434[^\\s]*)",
                "group": 1
            },
            {
                "value_key": "openwebui_url",
                "regex": "(https?://(?:localhost|127\\.0\\.0\\.1|0\\.0\\.0\\.0):8080[^\\s]*)",
                "group": 1
            }
        ],
        "modal_title": "Ollama Server Interactive Session",
        "modal_subtitle": "Access your Ollama API server through the URL below.",
        "instructions": [
            {
                "kind": "url",
                "title": "Access Ollama API Server",
                "description": "Once ready, use the URL below to access your Ollama server. The Ollama server provides an OpenAI-compatible API endpoint.",
                "value_key": "ollama_url",
                "placeholder": "Waiting for service to start. The URL will appear here once the connection is available...",
                "example_template": "curl {{ollama_url}}/api/generate -d '{\n  \"model\": \"your-model-name\",\n  \"prompt\": \"Why is the sky blue?\",\n  \"stream\": false\n}'"
            },
            {
                "kind": "url",
                "title": "Access Open WebUI",
                "description": "Use the URL below to open Open WebUI connected to this Ollama server. This gives you a convenient browser chat UI backed by the same Ollama API.",
                "value_key": "openwebui_url",
                "placeholder": "Waiting for the Open WebUI service to start..."
            }
        ]
    },
    {
        "id": "ollama_gradio",
        "name": "Ollama + Gradio",
        "description": "Ollama model server with Gradio chat UI via ngrok tunnel",
        "github_repo_url": "https://github.com/transformerlab/transformerlab-examples",
        "github_repo_dir": "inference-ollama-gradio-chat",
        "env_parameters": [
            {
                "field_name": "Model Name",
                "env_var": "MODEL_NAME",
                "field_type": "str",
                "required": true,
                "placeholder": "e.g. llama2, mistral, codellama",
                "help_text": "Ollama model name (e.g. llama2, mistral, codellama)."
            }
        ],
        "icon": "https://lab.cloud/img/icons/ollama.png",
        "supported_accelerators": [
            "cpu",
            "NVIDIA",
            "AMD",
            "AppleSilicon"
        ],
        "_comment_ports": "Ollama API on 11434, Gradio UI on 7860. Both tunneled via ngrok.",
        "ports": [
            {
                "port": 11434,
                "label": "Ollama API",
                "protocol": "http"
            },
            {
                "port": 7860,
                "label": "Gradio Chat UI",
                "protocol": "http"
            }
        ],
        "url_patterns": [
            {
                "value_key": "gradio_url",
                "regex": "Running on (?:local URL:\\s*)?(https?://[^\\s]+)",
                "group": 1
            }
        ],
        "modal_title": "Ollama + Gradio Interactive Session",
        "modal_subtitle": "Access your Ollama server and Gradio chat UI through the URLs below.",
        "instructions": [
            {
                "kind": "url",
                "title": "Access Gradio Chat UI",
                "description": "Once ready, click the link below to open the Gradio chat interface connected to your Ollama server.",
                "value_key": "gradio_url",
                "placeholder": "Waiting for Gradio to start. The URL will appear here once the connection is available..."
            }
        ]
    },
    {
        "id": "comfy_ui",
        "name": "ComfyUI",
        "description": "ComfyUI server via ngrok tunnel",
        "github_repo_url": "https://github.com/transformerlab/transformerlab-examples",
        "github_repo_dir": "interactive-comfyui",
        "env_parameters": [
            {
                "field_name": "ngrok Auth Token",
                "env_var": "NGROK_AUTH_TOKEN",
                "field_type": "str",
                "required": true,
                "placeholder": "ngrok_...",
                "help_text": "Your ngrok authentication token. You can get your token from https://dashboard.ngrok.com/get-started/your-authtoken.",
                "password": true
            }
        ],
        "icon": "https://lab.cloud/img/icons/comfyui.png",
        "supported_accelerators": [
            "cpu",
            "NVIDIA",
            "AMD",
            "AppleSilicon"
        ],
        "ports": [
            {
                "port": 8188,
                "label": "ComfyUI",
                "protocol": "http"
            }
        ],
        "url_patterns": [
            {
                "value_key": "comfy_url",
                "regex": "(https://[a-zA-Z0-9-]+\\.(?:trycloudflare\\.com|ngrok-free\\.app|ngrok-free\\.dev|ngrok\\.io))",
                "group": 1
            }
        ],
        "modal_title": "ComfyUI Interactive Session",
        "modal_subtitle": "Access your ComfyUI server through the URL below.",
        "instructions": [
            {
                "kind": "url",
                "title": "Access ComfyUI",
                "description": "Once ready, click the link below to open ComfyUI in your browser.",
                "value_key": "comfy_url",
                "placeholder": "Waiting for ngrok to start. The URL will appear here once available..."
            }
        ]
    },
    {
        "id": "ssh",
        "interactive_type": "ssh",
        "name": "SSH",
        "description": "SSH access via ngrok TCP tunnel",
        "github_repo_url": "https://github.com/transformerlab/transformerlab-examples",
        "github_repo_dir": "interactive-ssh",
        "env_parameters": [
            {
                "field_name": "ngrok Auth Token",
                "env_var": "NGROK_AUTH_TOKEN",
                "field_type": "str",
                "required": true,
                "placeholder": "ngrok_...",
                "help_text": "Your ngrok authentication token. Note: You may need to add a payment method to your ngrok account (it won't be charged, but it's necessary for SSH connections). You can get your token from https://dashboard.ngrok.com/get-started/your-authtoken.",
                "password": true
            }
        ],
        "icon": "https://lab.cloud/img/icons/ssh.png",
        "supported_accelerators": [
            "cpu",
            "NVIDIA",
            "AMD"
        ],
        "remoteOnly": true,
        "_comment_ports": "SSH runs on port 22, tunneled via ngrok TCP tunnel.",
        "ports": [
            {
                "port": 22,
                "label": "SSH",
                "protocol": "tcp"
            }
        ],
        "modal_title": "SSH Tunnel Interactive Session",
        "modal_subtitle": "Access your remote machine via SSH through the ngrok tunnel.",
        "instructions": [
            {
                "kind": "kv",
                "title": "Connection Information",
                "items": [
                    {
                        "label": "Domain",
                        "value_key": "domain"
                    },
                    {
                        "label": "Port",
                        "value_key": "port"
                    },
                    {
                        "label": "Username",
                        "value_key": "username",
                        "optional": true
                    }
                ]
            },
            {
                "kind": "command",
                "title": "SSH Command",
                "description": "Use the command below to connect to your remote machine.",
                "value_key": "ssh_command",
                "placeholder": "Waiting for tunnel to start. The SSH command will appear here once ngrok creates the tunnel..."
            },
            {
                "kind": "text",
                "title": "Usage Instructions",
                "template": "1. Download your organization's SSH key from Team Settings\n2. Save the key file (e.g., ~/org_ssh_key_{{team_id}})\n3. Set permissions: chmod 600 ~/org_ssh_key_{{team_id}}\n4. Copy the SSH command above\n5. Open your terminal\n6. Paste and run the command"
            }
        ]
    },
    {
        "id": "mlx_gradio",
        "name": "MLX LM + Gradio",
        "description": "MLX LM inference server with Gradio chat UI for Apple Silicon",
        "github_repo_url": "https://github.com/transformerlab/transformerlab-examples",
        "github_repo_dir": "inference-mlx-gradio-chat",
        "env_parameters": [
            {
                "field_name": "Model Name",
                "env_var": "MODEL_NAME",
                "field_type": "str",
                "required": true,
                "placeholder": "e.g. mlx-community/Llama-3.2-3B-Instruct-4bit",
                "help_text": "HuggingFace model identifier (must be an MLX-compatible model, e.g. from mlx-community)"
            }
        ],
        "icon": "https://github.com/ml-explore.png",
        "supported_accelerators": [
            "AppleSilicon"
        ],
        "_comment_ports": "MLX LM API on 8001, Gradio UI on 7860.",
        "ports": [
            {
                "port": 8001,
                "label": "MLX LM API",
                "protocol": "http"
            },
            {
                "port": 7860,
                "label": "Gradio Chat UI",
                "protocol": "http"
            }
        ],
        "url_patterns": [
            {
                "value_key": "gradio_url",
                "regex": "Running on (?:local URL:\\s*)?(https?://[^\\s]+)",
                "group": 1
            }
        ],
        "modal_title": "MLX LM + Gradio Interactive Session",
        "modal_subtitle": "Access your MLX LM server and Gradio chat UI through the URL below.",
        "instructions": [
            {
                "kind": "url",
                "title": "Access Gradio Chat UI",
                "description": "Once ready, click the link below to open the Gradio chat interface connected to your MLX LM server.",
                "value_key": "gradio_url",
                "placeholder": "Waiting for Gradio to start. The URL will appear here once the connection is available..."
            }
        ]
    },
    {
        "id": "mlx_audio_tts",
        "name": "MLX Audio TTS + Gradio",
        "description": "Text-to-Speech using MLX Audio with Gradio UI for Apple Silicon",
        "github_repo_url": "https://github.com/transformerlab/transformerlab-examples",
        "github_repo_dir": "inference-mlx-audio-tts",
        "env_parameters": [
            {
                "field_name": "Model Name",
                "env_var": "MODEL_NAME",
                "field_type": "str",
                "required": true,
                "placeholder": "e.g. mlx-community/Kokoro-82M-bf16",
                "help_text": "HuggingFace model identifier for an MLX-compatible TTS model (e.g. mlx-community/Kokoro-82M-bf16, mlx-community/Dia-1.6B-fp16)"
            }
        ],
        "icon": "https://github.com/ml-explore.png",
        "supported_accelerators": [
            "AppleSilicon"
        ],
        "_comment_ports": "Gradio TTS UI on 7860.",
        "ports": [
            {
                "port": 7860,
                "label": "Gradio TTS UI",
                "protocol": "http"
            }
        ],
        "url_patterns": [
            {
                "value_key": "gradio_url",
                "regex": "Running on (?:local URL:\\s*)?(https?://[^\\s]+)",
                "group": 1
            }
        ],
        "modal_title": "MLX Audio TTS + Gradio Interactive Session",
        "modal_subtitle": "Access your MLX Audio text-to-speech interface through the URL below.",
        "instructions": [
            {
                "kind": "url",
                "title": "Access Gradio TTS UI",
                "description": "Once ready, click the link below to open the Gradio text-to-speech interface.",
                "value_key": "gradio_url",
                "placeholder": "Waiting for Gradio to start. The URL will appear here once the connection is available..."
            }
        ]
    }
]