/* Text to Video Generator — model-aware input renderer. */ const { useState } = React; const { Button, Label, Textarea, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, FilePicker, } = ConstantsUI; const MODEL_CONFIG = { "grok-imagine": { label: "Grok Imagine", hint: "Grok Imagine at $0.05/second, with text, image, and video inputs up to 720p.", maxDuration: 15, defaultAspect: "auto", aspects: ["auto", "16:9", "9:16", "4:3", "3:4", "3:2", "2:3", "1:1"], defaultResolution: "720p", resolutions: ["720p", "480p"], maxReferenceImages: 0, allowsCombinedImages: false, referenceHint: "Grok Imagine does not support reference images; use one starting frame instead.", }, grok: { label: "Grok Imagine 1.5", hint: "xAI's latest text-to-video model with native audio and up to 1080p output.", maxDuration: 15, defaultAspect: "auto", aspects: ["auto", "16:9", "9:16", "4:3", "3:4", "3:2", "2:3", "1:1"], defaultResolution: "720p", resolutions: ["1080p", "720p", "480p"], maxReferenceImages: 7, allowsCombinedImages: false, referenceHint: "Visual guides only; reference them as , , and so on. Reference mode supports up to 720p.", }, omni: { label: "Gemini Omni Flash", hint: "Lip-synced speech and reference-image fidelity, up to 15 seconds.", maxDuration: 15, defaultAspect: "16:9", aspects: ["16:9", "9:16"], defaultResolution: null, resolutions: [], maxReferenceImages: null, allowsCombinedImages: true, referenceHint: "Visual guides that do not set the first frame; reference them as , , and so on.", }, seedance: { label: "Seedance 2.5", hint: "Longer multimodal clips with native audio, up to 30 seconds.", maxDuration: 30, defaultAspect: "adaptive", aspects: ["adaptive", "16:9", "9:16", "4:3", "3:4", "1:1", "21:9"], defaultResolution: "720p", resolutions: ["720p", "480p"], maxReferenceImages: 30, allowsCombinedImages: false, referenceHint: "Visual guides only; reference them as [Image1], [Image2], and so on.", }, }; function aspectLabel(value) { if (value === "auto") return "Auto"; if (value === "adaptive") return "Adaptive"; return value; } function Tool({ onRun }) { const [prompt, setPrompt] = useState(""); const [model, setModel] = useState("grok-imagine"); const [duration, setDuration] = useState(5); const [aspectRatio, setAspectRatio] = useState("auto"); const [resolution, setResolution] = useState("720p"); const [hasStartingFrame, setHasStartingFrame] = useState(false); const [referenceImageCount, setReferenceImageCount] = useState(0); const [loading, setLoading] = useState(false); const config = MODEL_CONFIG[model]; const hasMediaConflict = hasStartingFrame && referenceImageCount > 0 && !config.allowsCombinedImages; const hasTooManyReferences = config.maxReferenceImages !== null && referenceImageCount > config.maxReferenceImages; const mediaError = hasMediaConflict ? `${config.label} cannot combine a starting frame with reference images.` : hasTooManyReferences ? `${config.label} supports at most ${config.maxReferenceImages} reference images.` : null; const availableResolutions = model === "grok" && referenceImageCount > 0 ? config.resolutions.filter((value) => value !== "1080p") : config.resolutions; const handleModelChange = (nextModel) => { const next = MODEL_CONFIG[nextModel]; setModel(nextModel); setDuration((current) => Math.min(next.maxDuration, Math.max(1, current))); setAspectRatio((current) => next.aspects.includes(current) ? current : next.defaultAspect ); if (next.resolutions.length > 0) { setResolution((current) => nextModel === "grok" && referenceImageCount > 0 && current === "1080p" ? "720p" : next.resolutions.includes(current) ? current : next.defaultResolution ); } }; const handleReferenceImagesChange = (files) => { setReferenceImageCount(files.length); if (model === "grok" && files.length > 0 && resolution === "1080p") { setResolution("720p"); } }; const handleRun = async () => { setLoading(true); showLoading(`Generating with ${config.label}...`); try { const payload = { prompt, model, duration, aspectRatio }; if (config.resolutions.length > 0) payload.resolution = resolution; await onRun(payload); } catch (err) { showError(err.message); } finally { hideLoading(); setLoading(false); } }; return (

Text to Video Generator

Generate video with synchronized audio using the model that best fits your scene.

Model

{config.hint}

Prompt

setPrompt(event.target.value)}
          placeholder="e.g. A golden retriever running through a sunlit meadow, cinematic slow motion, warm color grading"
          rows={4}
        />
      </div>

<div>
        <Label>Starting Frame (optional)</Label>
        <FilePicker
          fieldName="image"
          accept={[".jpg", ".jpeg", ".png", ".webp"]}
          onChange={(files) => setHasStartingFrame(files.length > 0)}
        />
        <p className="text-xs text-gray-500 mt-1">
          This image becomes the literal first frame. Focus the prompt on motion and camera direction.
        </p>
      </div>

<div>
        <Label>Reference Images (optional)</Label>
        <FilePicker
          fieldName="referenceImages"
          accept={[".jpg", ".jpeg", ".png", ".webp"]}
          multiple={true}
          onChange={handleReferenceImagesChange}
        />
        <p className="text-xs text-gray-500 mt-1">
          {config.referenceHint}
        </p>
        {mediaError && <p className="text-xs text-red-600 mt-1">{mediaError}</p>}
      </div>

<div className={`grid gap-3 ${config.resolutions.length > 0 ? "grid-cols-3" : "grid-cols-2"}`}>
        <div>
          <Label>Duration</Label>
          <Input
            type="number"
            min={1}
            max={config.maxDuration}
            value={duration}
            onChange={(event) =>
              setDuration(
                Math.min(config.maxDuration, Math.max(1, Number(event.target.value)))
              )
            }
          />
          <p className="text-xs text-gray-500 mt-1">Up to {config.maxDuration}s</p>
        </div>

<div>
          <Label>Aspect Ratio</Label>
          <Select value={aspectRatio} onValueChange={setAspectRatio}>
            <SelectTrigger><SelectValue /></SelectTrigger>
            <SelectContent>
              {config.aspects.map((value) => (
                <SelectItem key={value} value={value}>{aspectLabel(value)}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

{config.resolutions.length > 0 && (
          <div>
            <Label>Resolution</Label>
            <Select value={resolution} onValueChange={setResolution}>
              <SelectTrigger><SelectValue /></SelectTrigger>
              <SelectContent>
                {availableResolutions.map((value) => (
                  <SelectItem key={value} value={value}>{value}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        )}
      </div>

<Button onClick={handleRun} disabled={loading || !prompt.trim() || Boolean(mediaError)}>
        {loading ? "Generating..." : `Generate with ${config.label}`}
      </Button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  React.createElement(Tool, { onRun: window.__onRun })
);
</article></body></html>

AI Video Generatora Constants tool made by Constants