> ## Documentation Index
> Fetch the complete documentation index at: https://www.krea.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# من صورة إلى فيديو

> حرّك الصور الثابتة وحوّلها إلى مقاطع فيديو باستخدام نماذج تحويل الصورة إلى فيديو من Krea، مع قبول روابط الصور المستضافة أو مدخلات base64 بصيغة data URI لكل عملية توليد.

export const ModelOverviewCard = ({name, description, icon, href}) => {
  const resolvedIcon = (() => {
    if (typeof icon !== "string" || !icon.startsWith("/") || icon.startsWith("//")) return icon;
    if (typeof window === "undefined") return icon;
    const base = "/docs";
    const under = window.location.pathname === base || window.location.pathname.startsWith(base + "/");
    return under && !icon.startsWith(base + "/") ? base + icon : icon;
  })();
  return <a href={href} className="group relative block rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-black overflow-hidden hover:border-black dark:hover:border-white transition-all duration-200 p-6">
      {}
      <div className="flex items-center justify-center w-8 h-8 rounded-lg mb-4 transition-colors duration-200">
        {icon && <img src={resolvedIcon} alt={`${name} logo`} className="w-8 h-8 object-contain transition-all duration-200" />}
      </div>

      {}
      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-black dark:text-white transition-colors">
          {name}
        </h3>
        <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-4">
          {description}
        </p>
      </div>

      {}
      <div className="absolute top-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
        <svg className="w-4 h-4 text-black dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </a>;
};

export const HeroHeader = ({image, video, title, description}) => {
  return <div className="relative aspect-[2/1] h-[30vh] w-full rounded-lg overflow-hidden mb-8">
      {}
      {video && <video autoPlay muted loop playsInline className="absolute top-0 left-0 w-full h-full object-cover hidden md:block m-0" style={{
    zIndex: 1,
    objectPosition: "20% 20%"
  }}>
          <source src={video} type="video/webm" />
        </video>}

      {}
      <img src={image} alt="" className={`absolute top-0 left-0 m-0 w-full h-full object-cover ${video ? "md:hidden" : "block"}`} style={{
    zIndex: 1,
    objectPosition: "20% 20%"
  }} />

      {}
      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-black/10 flex flex-col justify-end p-8 dark:hidden" style={{
    zIndex: 2
  }}>
        <h1 className="text-4xl font-bold text-white m-0 drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
          {title}
        </h1>
        <p className="text-lg text-white/95 mt-2 drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]">
          {description}
        </p>
      </div>

      {}
      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/20 hidden dark:flex flex-col justify-end p-8" style={{
    zIndex: 2
  }}>
        <h1 className="text-4xl font-bold text-white m-0 drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
          {title}
        </h1>
        <p className="text-lg text-white/95 mt-2 drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]">
          {description}
        </p>
      </div>
    </div>;
};

<HeroHeader image="https://s.krea.ai/docs-image-to-video.webp" video="https://s.krea.ai/docs-image-to-video-new.webm" title="من صورة إلى فيديو" description="أضف الحياة إلى صورك. حوّل الصور الثابتة إلى مقاطع فيديو ديناميكية بفضل الرسوم المتحركة وحركة الكاميرا المدعومة بالذكاء الاصطناعي." />

## النماذج الشائعة

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 hidden dark:grid">
  <ModelOverviewCard name="Veo 3.1" href="/api-reference/video/veo-31" icon="/images/logo/deepmind-dark.svg" description="نموذج فيديو من Google يتميز بالتزام استثنائي بالموجِّه وجودة سينمائية." />

  <ModelOverviewCard name="Kling 2.5" href="/api-reference/video/kling-25" icon="/images/logo/kling-dark.svg" description="تحكم متقدم في الحركة مع اتساق زمني وفيزياء واقعية." />

  <ModelOverviewCard name="Hailuo 2.3" href="/api-reference/video/hailuo-23" icon="/images/logo/hailuo-dark.svg" description="توليد سريع مع حركة سلسة وانتقالات طبيعية بين المشاهد." />

  <ModelOverviewCard name="Wan 2.5" href="/api-reference/video/wan-25" icon="/images/logo/qwen-dark.svg" description="توليد فيديو بدقة عالية مع التحكم في الأسلوب والحفاظ على التفاصيل." />
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 block dark:hidden">
  <ModelOverviewCard name="Veo 3.1" href="/api-reference/video/veo-31" icon="/images/logo/deepmind-light.svg" description="نموذج فيديو من Google يتميز بالتزام استثنائي بالموجِّه وجودة سينمائية." />

  <ModelOverviewCard name="Kling 2.5" href="/api-reference/video/kling-25" icon="/images/logo/kling-light.svg" description="تحكم متقدم في الحركة مع اتساق زمني وفيزياء واقعية." />

  <ModelOverviewCard name="Hailuo 2.3" href="/api-reference/video/hailuo-23" icon="/images/logo/hailuo-light.svg" description="توليد سريع مع حركة سلسة وانتقالات طبيعية بين المشاهد." />

  <ModelOverviewCard name="Wan 2.5" href="/api-reference/video/wan-25" icon="/images/logo/qwen-light.svg" description="توليد فيديو بدقة عالية مع التحكم في الأسلوب والحفاظ على التفاصيل." />
</div>

***

<Note>
  يجمع التوليد من صورة إلى فيديو بين صورتك المُدخلة وتوليد الحركة. يحافظ الناتج على الاتساق البصري مع الصورة المصدر مع إضافة حركة واقعية.
</Note>

***

## الخطوة 1: تجهيز صورتك

أولاً، عليك توفير الصورة المصدر. يمكنك إما رفع ملف، أو الإشارة إلى عنوان URL، أو توفير base64 data URI.

<CodeGroup>
  ```javascript Node.js theme={null}
  // npm install @krea-ai/sdk
  import { openAsBlob } from "node:fs";
  import { Krea } from "@krea-ai/sdk";

  const krea = new Krea({ apiKey: process.env.KREA_API_KEY });

  // Option 1: Upload a local file and use the hosted asset URL
  const file = await openAsBlob("./input-image.jpg", { type: "image/jpeg" });
  const asset = await krea.assets.upload(file, {
    description: "Input image",
  });
  const imageUrl = asset.image_url;

  // Option 2: Using image URL
  // const imageUrl = "https://example.com/input-image.jpg";
  ```

  ```python Python theme={null}
  import requests

  API_BASE = "https://api.krea.ai"
  API_TOKEN = "YOUR_API_TOKEN"

  # Option 1: Upload a local file and use the hosted asset URL
  with open("input-image.jpg", "rb") as image_file:
      upload = requests.post(
          f"{API_BASE}/assets",
          headers={"Authorization": f"Bearer {API_TOKEN}"},
          files={"file": ("input-image.jpg", image_file, "image/jpeg")},
          data={"description": "Input image"},
      )
  upload.raise_for_status()
  image_url = upload.json()["image_url"]

  # Option 2: Using image URL
  # image_url = "https://example.com/input-image.jpg"
  ```

  <Info>
    **استبدله برمز API الخاص بك**

    لاستبدال العنصر النائب YOUR\_API\_TOKEN في الأمثلة أعلاه، ستحتاج إلى إنشاء رمز API في [krea.ai/settings/api-tokens](https://www.krea.ai/settings/api-tokens). اتبع التعليمات في صفحة [مفاتيح API والفوترة](/developers/api-keys-and-billing) إذا احتجت إلى المساعدة.
  </Info>
</CodeGroup>

***

## الخطوة 2: توليد الفيديو

أرسل طلب POST إلى `/generate/video/kling/kling-2.5` مع صورتك ومعاملات الحركة.

<CodeGroup>
  ```javascript Node.js theme={null}
  // npm install @krea-ai/sdk
  import { Krea } from "@krea-ai/sdk";

  const krea = new Krea({ apiKey: process.env.KREA_API_KEY });

  const job = await krea.video("kling/kling-2.5", {
    start_image: imageUrl,
    prompt: "gentle camera pan from left to right, subtle depth",
    duration: 5,
    aspect_ratio: "16:9"
  });

  console.log(`Job ID: ${job.job_id}`);
  ```

  ```bash cURL theme={null}
  curl -X POST https://api.krea.ai/generate/video/kling/kling-2.5 \
    -H "Authorization: Bearer YOUR_API_TOKEN" \
    -H "Content-Type: application/json" \
    -d '{
      "start_image": "https://example.com/input-image.jpg",
      "prompt": "gentle camera pan from left to right, subtle depth",
      "duration": 5,
      "aspect_ratio": "16:9"
    }'
  ```

  ```python Python theme={null}
  response = requests.post(
      f"{API_BASE}/generate/video/kling/kling-2.5",
      headers={
          "Authorization": f"Bearer {API_TOKEN}",
          "Content-Type": "application/json"
      },
      json={
          "start_image": image_url,
          "prompt": "gentle camera pan from left to right, subtle depth",
          "duration": 5,
          "aspect_ratio": "16:9"
      }
  )

  job = response.json()
  print(f"Job ID: {job['job_id']}")
  ```

  ```go Go theme={null}
  package main

  import (
      "bytes"
      "encoding/json"
      "fmt"
      "net/http"
  )

  func main() {
      apiBase := "https://api.krea.ai"
      apiToken := "YOUR_API_TOKEN"

      payload := map[string]interface{}{
          "start_image": "https://example.com/input-image.jpg",
          "prompt": "gentle camera pan from left to right, subtle depth",
          "duration": 5,
          "aspect_ratio": "16:9",
      }

      jsonData, _ := json.Marshal(payload)
      req, _ := http.NewRequest("POST", apiBase+"/generate/video/kling/kling-2.5", bytes.NewBuffer(jsonData))
      req.Header.Set("Authorization", "Bearer "+apiToken)
      req.Header.Set("Content-Type", "application/json")

      client := &http.Client{}
      resp, _ := client.Do(req)
      defer resp.Body.Close()

      var job map[string]interface{}
      json.NewDecoder(resp.Body).Decode(&job)
      fmt.Printf("Job ID: %s\n", job["job_id"])
  }
  ```
</CodeGroup>

<Info>
  **استبدله برمز API الخاص بك**

  لاستبدال العنصر النائب YOUR\_API\_TOKEN في الأمثلة أعلاه، ستحتاج إلى إنشاء رمز API في [krea.ai/settings/api-tokens](https://www.krea.ai/settings/api-tokens). اتبع التعليمات في صفحة [مفاتيح API والفوترة](/developers/api-keys-and-billing) إذا احتجت إلى المساعدة.
</Info>

**مثال على الاستجابة**

```json theme={null}
{
  "job_id": "550e8400-e29b-41d4-a716-446655440000",
  "status": "queued",
  "created_at": "2025-01-15T10:30:00.000Z",
  "estimated_time": "60-120 seconds"
}
```

***

## الخطوة 3: الاستعلام عن النتائج

استعلم عن `/jobs/{job_id}` كل 5 ثوانٍ لمعرفة تقدّم توليد الفيديو.

<CodeGroup>
  ```javascript Node.js theme={null}
  // npm install @krea-ai/sdk
  import { Krea } from "@krea-ai/sdk";

  const krea = new Krea({ apiKey: process.env.KREA_API_KEY });

  async function waitForVideo(jobId) {
    const completed = await krea.jobs.wait(jobId, { intervalMs: 5000 });
    return completed.result.urls[0];
  }

  const videoUrl = await waitForVideo(job.job_id);
  console.log(`Video ready: ${videoUrl}`);
  ```

  ```bash cURL theme={null}
  curl -X GET https://api.krea.ai/jobs/YOUR_JOB_ID \
    -H "Authorization: Bearer YOUR_API_TOKEN"
  ```

  ```python Python theme={null}
  import time

  def wait_for_video(job_id):
      while True:
          response = requests.get(
              f"{API_BASE}/jobs/{job_id}",
              headers={"Authorization": f"Bearer {API_TOKEN}"}
          )
          job = response.json()

          if job["status"] == "completed":
              return job["result"]["urls"][0]
          if job["status"] in ("failed", "cancelled"):
              raise Exception(f"Job failed: {job['status']}")

          # Show progress if available
          if "progress" in job:
              print(f"Progress: {job['progress']}%")
          else:
              print(f"Status: {job['status']}")

          time.sleep(5)

  video_url = wait_for_video(job["job_id"])
  print(f"Video ready: {video_url}")
  ```

  ```go Go theme={null}
  func waitForVideo(jobID string) (string, error) {
      for {
          req, _ := http.NewRequest("GET", apiBase+"/jobs/"+jobID, nil)
          req.Header.Set("Authorization", "Bearer "+apiToken)

          resp, _ := client.Do(req)
          var job map[string]interface{}
          json.NewDecoder(resp.Body).Decode(&job)
          resp.Body.Close()

          switch job["status"] {
          case "completed":
              result := job["result"].(map[string]interface{})
              urls := result["urls"].([]interface{})
              return urls[0].(string), nil
          case "failed", "cancelled":
              return "", fmt.Errorf("job failed: %s", job["status"])
          }

          // Show progress if available
          if progress, ok := job["progress"]; ok {
              fmt.Printf("Progress: %.0f%%\n", progress)
          } else {
              fmt.Printf("Status: %s\n", job["status"])
          }

          time.Sleep(5 * time.Second)
      }
  }
  ```
</CodeGroup>

**مثال على استجابة مكتملة**

```json theme={null}
{
  "job_id": "550e8400-e29b-41d4-a716-446655440000",
  "status": "completed",
  "created_at": "2025-01-15T10:30:00.000Z",
  "completed_at": "2025-01-15T10:31:45.000Z",
  "result": {
    "urls": ["https://gen.krea.ai/videos/your-video.mp4"]
  }
}
```

<Note>
  **خطافات الويب متاحة!**

  أعدّ خطافات الويب لتلقي إشعارات عند اكتمال المهام. راجع [دليل خطافات الويب](/developers/webhooks) للبدء.
</Note>

***

## المعاملات الشائعة

<Tip>
  للاطلاع على قائمة بالمعاملات التفصيلية لجميع النماذج، راجع صفحة [واجهات النماذج](/api-reference/introduction).
</Tip>

| المعامل        | النوع  | الوصف                                                   |
| -------------- | ------ | ------------------------------------------------------- |
| `start_image`  | string | عنوان URL للصورة المصدر                                 |
| `prompt`       | string | وصف الحركة المرغوبة وحركة الكاميرا                      |
| `duration`     | number | طول الفيديو بالثواني. تعتمد القيم المدعومة على النموذج. |
| `aspect_ratio` | string | نسبة أبعاد الفيديو، مثل `16:9` أو `9:16` أو `1:1`       |
| `end_image`    | string | عنوان URL اختياري للإطار النهائي للنماذج المدعومة       |
| `mode`         | string | وضع جودة اختياري للنماذج التي توفّره                    |

<Tip>
  **نصائح لكتابة موجِّه الحركة:**

  * صف حركة الكاميرا (تحريك أفقي، تكبير، دفع، إمالة)
  * حدّد اتجاه الحركة وسرعتها
  * اذكر تأثيرات العمق والباراللاكس
  * استخدم لغة كاميرا مقيدة للرسوم المتحركة الخفيفة
  * استخدم أفعال حركة أقوى للتأثيرات الدراماتيكية
</Tip>