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

# Créer des ressources

> Créez des images, des vidéos, des graphiques vectoriels, des animations et des ressources audio, puis suivez les guides de référence pour chaque flux de travail.

export const CreateAssetsCover = () => <div className="chat-mkt" role="img" aria-label="A creative canvas with image, video, vector, and audio elements" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -16%, rgba(255,255,255,.82), transparent 43%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 49%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  width: "100%",
  minHeight: "inherit",
  placeItems: "center",
  padding: "clamp(14px, 3vw, 28px)",
  boxSizing: "border-box"
}}>
        <div style={{
  position: "absolute",
  left: "clamp(14px, 9%, 88px)",
  top: "22%",
  width: "clamp(44px, 9vw, 72px)",
  height: "clamp(38px, 8vw, 62px)",
  padding: 7,
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 14,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.15)",
  backdropFilter: "blur(5px)",
  boxSizing: "border-box"
}}>
          <span style={{
  position: "absolute",
  top: "24%",
  right: "21%",
  width: 5,
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.86)"
}} />
          <span style={{
  position: "absolute",
  left: "-5%",
  right: "-5%",
  bottom: "-16%",
  height: "68%",
  transform: "rotate(27deg)",
  borderTop: "1px solid rgba(255,255,255,.68)",
  background: "rgba(255,255,255,.18)"
}} />
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(14px, 9%, 88px)",
  top: "22%",
  display: "grid",
  width: "clamp(44px, 9vw, 72px)",
  height: "clamp(38px, 8vw, 62px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 14,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.15)",
  backdropFilter: "blur(5px)"
}}>
          <span style={{
  width: 0,
  height: 0,
  marginLeft: 4,
  borderTop: "10px solid transparent",
  borderBottom: "10px solid transparent",
  borderLeft: "15px solid rgba(255,255,255,.86)"
}} />
        </div>
        <div style={{
  position: "absolute",
  left: "clamp(22px, 14%, 128px)",
  bottom: "clamp(18px, 10%, 46px)",
  display: "grid",
  width: "clamp(38px, 7vw, 58px)",
  height: "clamp(38px, 7vw, 58px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.15)",
  boxShadow: "0 12px 24px rgba(55,27,18,.13)",
  backdropFilter: "blur(5px)"
}}>
          <svg viewBox="0 0 24 24" width="56%" fill="none" stroke="rgba(255,255,255,.86)" strokeWidth="1.6">
            <path d="M5 19 12 4l7 15H5Z" />
            <circle cx="12" cy="12" r="2.2" fill="rgba(255,255,255,.26)" />
          </svg>
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(22px, 14%, 128px)",
  bottom: "clamp(18px, 10%, 46px)",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  gap: 3,
  width: "clamp(40px, 8vw, 62px)",
  height: "clamp(38px, 7vw, 58px)",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.15)",
  boxShadow: "0 12px 24px rgba(55,27,18,.13)",
  backdropFilter: "blur(5px)"
}}>
          {[10, 20, 14, 25, 12].map((height, index) => <span key={index} style={{
  width: 3,
  height,
  borderRadius: 999,
  background: index === 3 ? "rgba(255,255,255,.88)" : "rgba(255,255,255,.52)"
}} />)}
        </div>
        <div style={{
  position: "relative",
  display: "grid",
  width: "clamp(174px, 34vw, 280px)",
  minWidth: "min(54%, 250px)",
  minHeight: "clamp(154px, 26vw, 212px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.66)",
  borderRadius: 22,
  background: "linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.12))",
  boxShadow: "0 22px 42px rgba(65,21,7,.24)",
  backdropFilter: "blur(8px)",
  boxSizing: "border-box"
}}>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 6
}}>
            {[0, 1, 2].map(dot => <span key={dot} style={{
  width: 7,
  height: 7,
  borderRadius: 999,
  background: dot === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.36)"
}} />)}
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "1.16fr .84fr",
  gap: 8,
  minHeight: "clamp(105px, 18vw, 150px)",
  marginTop: "clamp(13px, 2.3vw, 19px)"
}}>
            <div style={{
  position: "relative",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.48)",
  borderRadius: 10,
  background: "linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08))"
}}>
              <span style={{
  position: "absolute",
  left: "12%",
  bottom: "12%",
  width: "76%",
  height: "54%",
  transform: "skewY(-27deg)",
  borderTop: "1px solid rgba(255,255,255,.68)",
  background: "rgba(255,255,255,.16)"
}} />
            </div>
            <div style={{
  display: "grid",
  gap: 8
}}>
              <span style={{
  border: "1px solid rgba(255,255,255,.42)",
  borderRadius: 9,
  background: "rgba(255,255,255,.16)"
}} />
              <span style={{
  border: "1px solid rgba(255,255,255,.32)",
  borderRadius: 9,
  background: "rgba(255,255,255,.08)"
}} />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>;

<CreateAssetsCover />

Demandez à Replit de créer les médias dont votre travail a besoin, puis affinez le résultat dans la Conversation ou dans la surface produit propriétaire de ce flux de travail. Choisissez le type de ressource qui correspond au résultat visé.

## Choisissez un type de ressource

<section className="chat-mkt chat-workflow-grid has-visuals catalog-three-up">
  <a className="chat-example has-visual" href="/fr/features/agent/image-generation">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="image" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="image" size={19} />
    </span>

    <div className="chat-card-title">Générer des images</div>

    <p>
      Créez des images, illustrations, arrière-plans, icônes et autre contenu
      visuel personnalisés pour un Projet.
    </p>

    <div className="chat-card-link">Ouvrir Image Generation →</div>
  </a>

  <a className="chat-example has-visual" href="/fr/design/toolbar#generate">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="photo-film" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="photo-film" size={19} />
    </span>

    <div className="chat-card-title">Générer des clips vidéo</div>

    <p>
      Créez de courts clips animés et des animations avec les outils Generate
      media de Replit Design.
    </p>

    <div className="chat-card-link">Ouvrir le guide Design →</div>
  </a>

  <a className="chat-example has-visual" href="/fr/design/toolbar#generate">
    <div className="chat-use-case-visual palette-orange">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="bezier-curve" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="bezier-curve" size={19} />
    </span>

    <div className="chat-card-title">Générer des graphiques vectoriels</div>

    <p>
      Créez des icônes SVG, des logos, des diagrammes et des illustrations
      stylisées dans Replit Design.
    </p>

    <div className="chat-card-link">Ouvrir le guide Design →</div>
  </a>

  <a className="chat-example has-visual" href="/fr/features/artifact-types/animated-videos">
    <div className="chat-use-case-visual palette-ink">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="film" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="film" size={19} />
    </span>

    <div className="chat-card-title">Créer une vidéo animée</div>

    <p>
      Construisez des animations programmatiques via une Conversation et
      exportez le résultat en vidéo.
    </p>

    <div className="chat-card-link">Ouvrir Animated Videos →</div>
  </a>

  <a className="chat-example has-visual" href="/fr/features/agent/audio-generation">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="waveform" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="waveform" size={19} />
    </span>

    <div className="chat-card-title">Générer de l'audio</div>
    <p>Créez de la musique, des effets sonores ou une narration parlée pour une application.</p>
    <div className="chat-card-link">Ouvrir Audio Generation →</div>
  </a>
</section>

La création de ressources produit un résultat immédiat. Pour un travail qui doit se répéter selon un calendrier, poursuivez avec [Exécuter des tâches en Routine](/fr/chat/routines).

Les clips vidéo générés et les Animated Videos utilisent des flux de travail différents. Les Animated Videos sont des animations programmatiques que vous pouvez exporter en MP4. Pour un exemple de ressources visuelles, consultez [Concevoir votre premier écran](/fr/design/design-your-first-screen).

## Intégrer des informations actuelles

Web Search ne crée pas de ressource. Utilisez-le lorsqu'une image, un clip audio, une vidéo ou un graphique doit s'appuyer sur des informations actuelles, puis demandez à Replit de créer la ressource appropriée à partir de cette direction.

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/fr/features/agent/web-search">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="globe" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="globe" size={19} />
    </span>

    <div className="chat-card-title">Rechercher sur le web</div>

    <p>
      Réunissez des informations actuelles et des sources citées avant de créer
      une ressource.
    </p>

    <div className="chat-card-link">Ouvrir Web Search →</div>
  </a>
</section>