Adding an Image-to-Video Button to a Creator Tool

I'm an independent developer designing a small asset tool for content creators. The workflow starts with generating images and choosing one. The next thing I want to add is a button beside that image: “Generate video.”

An outfit image gave me a useful reason to build it. A still can show the color, texture, and shape of a dress. A short walking clip can add movement: the hem swings with each step, then settles when the person stops. Someone making fashion content could use that shot between a title card and a closer detail view.

That gave this experiment a specific brief: take one outfit image and make an eight-second clothing showcase from it. Keep the person and outfit recognizable, add a small amount of movement, and leave a pause at the end for editing.

Choose an image with room for the next action

I generated this starting image with GPT Image 2 through hiAPI. I asked for a plain terracotta linen dress, a simple studio background, and a full-length composition with room around the model. Having the shoes and hem visible matters when the next step is walking.

Image prompt and settings

Model: gpt-image-2/text-to-image. Settings: aspect_ratio: "9:16", resolution: "1K".

A realistic vertical 9:16 clothing catalog photograph of one fully clothed adult fashion model wearing a loose long-sleeved terracotta linen midi dress and simple closed-toe flat shoes. Full-length composition, standing comfortably facing the camera in a warm beige studio, arms resting at her sides. The plain dress has a round neckline and a gently flared skirt, with visible linen texture and natural folds. Soft daylight from the side, neutral expression, simple clean background and floor, natural proportions. Generous space around the model, entire outfit and shoes visible. No lettering, branding or accessories.

I then selected that result from the generation history and used it as the first frame for Seedance 2.5 image-to-video. The motion request was small: walk forward, turn slightly, and hold the final pose. Here is the output:

Silent preview. Watch the full video.

The image and video are an AI-generated concept outfit. This is a useful example of a visual asset workflow; it doesn't establish how a real garment fits or behaves.

The connection between the two jobs is first_frame_url. In the tool I'm designing, selecting an image would save its URL to the asset record. The video request would read that stored value, carrying the selected composition into the next step.

“Two steps” still turned into a longer walk

The result follows the main action: the model walks, the hem moves, and she turns into a standing pose. In the frames I checked, the dress color, neckline, sleeves, and waist seam stay broadly consistent.

The timing and framing were less exact. I asked for two small steps, but the clip contains more steps than that. By the end, the shoes are very close to the lower edge of the frame. The starting image had space below them; walking forward used that space up.

That gives me something concrete to change in a future attempt: allow more room below the model or ask for a smaller movement in place. I haven't tested those adjustments yet. For this version, I kept the clip because the walking and fabric movement are visible, with a usable pause at the end.

This also affects the product interaction. I want the original image to stay beside the result so the creator can judge the movement and the crop together before choosing a clip.

Connect a create request and a status check

I ran this pair in hiAPI's Playground. The public API equivalent below uses the same motion prompt and settings, with a persistent copy of the same source image. The image-to-video API guide covers the create and query endpoints.

Set your key in the HIAPI_API_KEY environment variable. Keep it on your server when connecting this flow to a web app.

This POST creates a billable video-generation task. Check the current model price before running it.

curl --fail-with-body --request POST 'https://api.hiapi.ai/v1/tasks' \
  --header "Authorization: Bearer $HIAPI_API_KEY" \
  --header 'Content-Type: application/json' \
  --data '{
  "model": "seedance-2.5/image-to-video",
  "input": {
    "prompt": "A single continuous eight-second clothing showcase starting from this exact image. The model takes two small unhurried steps toward the camera, then gently turns about 30 degrees to her left and settles into a relaxed pose. Her arms swing only slightly. The hem of the linen dress sways in response to each step, the folds shift naturally with the movement, then settle when she stops. Keep the same terracotta dress, round neckline, long sleeves, seam placement, fabric texture, length, shoes and person throughout. Locked camera, no zoom or cuts. Keep the entire outfit and both shoes in the frame, preserve the studio and steady window lighting. Normal walking speed, modest natural motion, no spinning, no wind, no added objects or text. Hold the final pose for the last two seconds. Quiet room tone and soft footsteps, no speech or music.",
    "aspect_ratio": "adaptive",
    "duration": 8,
    "first_frame_url": "https://static.hiapi.ai/gallery/2026/09/f2bbe578bb60d4f1.png",
    "generate_audio": true,
    "output_format": "mp4",
    "resolution": "720p",
    "watermark": false,
    "web_search": false
  }
}'

A successful submission returns data.taskId. Use it to query the existing job:

TASK_ID='paste-the-returned-task-id'
curl --fail-with-body "https://api.hiapi.ai/v1/tasks/$TASK_ID" \
  --header "Authorization: Bearer $HIAPI_API_KEY"

Check periodically until data.status reaches success or fail. On success, find the item in data.output whose type is video and download its url. On failure, read data.error.message for the reason and stop polling. data.error.code is available for programmatic handling.

Use the returned expireAt to handle temporary output links. The source image above has been saved persistently so the example doesn't depend on the original temporary generation URL. Your tool will need a storage step for assets that users want to keep.

Keep the wait attached to the selected image

This video took about five minutes to return. That wait makes the asset record part of the feature: I need to retain the source image URL, motion prompt, video task ID, task status, and final output URL together.

With those fields saved, the page can keep showing the image while generation runs and resume checking the same task after a refresh. If generation fails, the creator can read the error and decide whether to try a new video, keeping the selected picture. Refreshing a status and paying for another generation need separate actions.

These interactions are still at the prototype-design stage. The image-to-video run is real; the one-card interface is what I'm designing around it. I'm starting with image selection, a motion prompt, submission, and result playback before adding more models.

If you're building a similar creator tool, pick an image and one action that adds something useful to it. Run the create and query requests, then watch whether the resulting shot works in an edit. The Quick Start covers getting a key and making your first request. Once that works, pass a selected image into the video step and keep both results in the same asset record.