> ## 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.

# Barre d'outils

> Référence pour la barre d'outils Canvas — Interagir, Panoramique, Chat, Dessiner, Modifier, Générer — ainsi que les gestes du tableau.

La barre d'outils Canvas est une barre flottante ancrée au bas-centre du tableau. Elle expose les outils que vous utilisez pour naviguer, dessiner, modifier et ajouter du contenu. La barre d'outils s'affiche en mode Canvas.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-toolbar.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=023d6e63f6ddbd10d74908708ab53b67" alt="Gros plan de la barre d'outils Canvas avec les boutons Interagir (sélectionné) et Panoramique icône uniquement à gauche, puis les boutons étiquetés Chat, Dessiner, Modifier et Générer à droite" width="454" height="50" data-path="images/replitai/canvas-toolbar.png" />
</Frame>

## Outils

Sélectionner un outil l'active. L'outil actif est mis en évidence avec un arrière-plan rempli. Le groupe le plus à gauche est la navigation (Interagir, Panoramique). Les autres sont des outils de contenu et de balisage. Les outils sont mutuellement exclusifs, ce qui signifie que la sélection d'un outil désactive les autres.

### Interagir

**Interagir** est l'outil par défaut. Utilisez-le pour sélectionner des frames, les faire glisser et cliquer dans un Artefact en direct pour l'utiliser comme une application réelle en cours d'exécution. Avec Interagir actif, cliquer sur une frame la sélectionne et fait apparaître la [barre d'action par frame](/references/design/frames#per-frame-action-bar).

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-interact.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=4d791ef05e8c21d6d89118ebfba4332c" alt="Canvas avec un artefact Website sélectionné à l'aide de l'outil Interagir — la frame est délimitée par des poignées de sélection roses, la barre d'action par frame (Réimaginer et Aperçu) est affichée au-dessus, et le champ de saisie en ligne « Demander des modifications ou discuter de la frame… » est affiché en dessous. L'outil Interagir est mis en évidence dans la barre d'outils flottante en bas." width="3450" height="2000" data-path="images/replitai/canvas-interact.png" />
</Frame>

**Raccourci clavier :** `V`. **Accès :** toujours activé.

### Panoramique

**Panoramique** change le curseur en outil de préhension pour que vous puissiez faire glisser le tableau lui-même. Lorsque Panoramique est actif, cliquer-et-glisser déplace la fenêtre d'affichage au lieu de sélectionner une frame. Vous pouvez également effectuer un panoramique depuis n'importe quel autre outil en maintenant la barre d'espace et en faisant glisser, ou en maintenant le bouton du milieu de la souris et en faisant glisser.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-pan.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=2b095492975bc038b91fc9523d33dace" alt="Canvas avec l'outil Panoramique actif — un artefact Website (Velocity — Supercar Rental) et une maquette Design (Velocity — Home (Mockup)) sont visibles sur le tableau, et l'outil Panoramique (curseur main) est mis en évidence dans la barre d'outils flottante en bas." width="1725" height="1041" data-path="images/replitai/canvas-pan.png" />
</Frame>

**Raccourci clavier :** `H`. **Accès :** toujours activé.

### Chat

**Chat** dépose un petit compositeur de chat directement sur le tableau afin que vous puissiez inviter l'Agent sans quitter Canvas. Les éléments et frames sélectionnés sont toujours joints au message en tant que captures instantanées, comme lorsque vous envoyez depuis le panneau de chat latéral de l'Agent.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-chat.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=377656bbc9a2149df4b9488c9ed94f20" alt="Canvas en mode Chat avec le reste du tableau assombri et le compositeur de chat en ligne superposé sur un artefact Website. Une puce « div » dans le compositeur indique un élément sélectionné, et l'invite indique « suggérer trois alternatives à cette image ». L'outil Chat est mis en évidence dans la barre d'outils flottante en bas." width="3450" height="2000" data-path="images/replitai/canvas-chat.png" />
</Frame>

**Accès :** outil Chat (ordinateur de bureau uniquement).

### Dessiner

**Dessiner** active les outils de balisage tels que le dessin à main levée, les flèches, les notes autocollantes et les formes, afin que vous puissiez esquisser sur des frames ou annoter le tableau. Utilisez-le pour encercler les zones problématiques, pointer vers des éléments que vous souhaitez modifier ou laisser une note écrite à côté d'une frame.

Lorsque Dessiner est actif, une barre **Propriétés de forme** apparaît au-dessus de la barre d'outils flottante avec des contrôles de couleur, de trait et de remplissage pour l'outil de balisage actuel. Elle se masque automatiquement lorsque vous revenez à Interagir ou Panoramique.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-draw.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=8259ca7d7f1833ccc39921b96b0ef2c2" alt="Canvas avec l'outil Dessiner actif — un rectangle « Widget » dessiné et une note autocollante violette « Ajouter un widget » sont placés à côté d'une frame. La barre Propriétés de forme (outils crayon, texte, rectangle, flèche, note autocollante, plus des nuanciers de couleur et un contrôle de taille de texte Aa) est visible au-dessus de la barre d'outils flottante, avec Dessiner mis en évidence." width="1725" height="1041" data-path="images/replitai/canvas-draw.png" />
</Frame>

**Accès :** toujours activé.

### Modifier

**Modifier** est le sélecteur visuel pour les éléments. Avec Modifier actif, cliquez à l'intérieur d'un Artefact en direct pour cibler un élément (un bouton, un titre, une image). La sélection d'un élément ouvre l'**Éditeur visuel** — un panneau latéral droit de contrôles (Disposition, Couleur, Bordure et plus) associé à une invite en ligne pour demander à l'Agent de modifier uniquement cette pièce. Voir [Éléments](/references/design/elements) et [Éditeur visuel](/learn/design/visual-editor) pour le flux complet.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-edit.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=d04a99a7f567c79c879a0168146b9f02" alt="Canvas avec l'outil Modifier actif — un élément image dans un artefact Website est sélectionné (surligné en bleu avec une étiquette de puce « img »), et le panneau Éditeur visuel affiche les contrôles Disposition (espace extérieur/intérieur), Couleur (opacité) et Bordure (couleur, largeur, rayon) ainsi que les boutons Ignorer et Enregistrer les modifications. L'outil Modifier est mis en évidence dans la barre d'outils flottante." width="1725" height="1041" data-path="images/replitai/canvas-edit.png" />
</Frame>

**Accès :** toujours activé (ordinateur de bureau). Désactivé tant qu'il n'existe pas au moins une frame ; l'infobulle indique *« Créez un artefact ou générez un design à modifier. »* Masqué sur mobile.

### Générer

**Générer** ouvre le popover **Générer un média** pour les images, les vidéos et les graphiques vectoriels. Choisissez un type, rédigez une invite et l'Agent place le résultat en tant que nouvelle frame sur le tableau.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-add-menu.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=1e6b4fad33d8f8a77a77c63dd244e6c9" alt="Le menu + Ajouter de Canvas ouvert avec quatre options empilées verticalement : Design (« Créer des interfaces et des concepts visuels »), Image (« Générer et modifier des images »), Vidéo (« Générer des clips en mouvement et des animations ») et Graphique vectoriel (« Générer des illustrations vectorielles et des SVG »). Le bouton Générer dans la barre d'outils flottante en bas indique maintenant « + Générer »." width="1102" height="702" data-path="images/replitai/canvas-add-menu.png" />
</Frame>

Le popover comporte quatre onglets en haut :

* **Design**
* **Image**
* **Vidéo**
* **Graphique vectoriel**

Certains contrôles sont partagés entre les types ; d'autres sont spécifiques au type.

**Contrôles partagés (tous les types) :**

* **Modèle** : le modèle de génération à utiliser. Les modèles disponibles varient selon le type (voir le tableau ci-dessous).
* **Invite** : description en langage naturel de ce que vous souhaitez que l'Agent génère.
* **Générer** : soumet la demande et réserve une frame de remplacement à la position du curseur. La frame de remplacement passe à une frame en direct une fois l'asset prêt ; si la génération échoue, la frame de remplacement est supprimée et une erreur apparaît dans le panneau de chat.

**Modèles et contrôles par type :**

| Type          | Idéal pour                                                                     | Modèles actuels                                                 | Contrôles spécifiques au type                                                    |
| ------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| **Image**     | Sortie raster (PNG / JPG) ; imagery de moodboard, plans héro, art de référence | Nano Banana, Nano Banana 2, Nano Banana Pro, ChatGPT Images 2.0 | Format d'image (`1:1`, `16:9`, `9:16`, `4:3`, `3:4`) · Taille (`1K`, `2K`, `4K`) |
| **Vidéo**     | Courts clips en mouvement et animations                                        | Veo 3.1, Seedance 2.0                                           | Format d'image · Résolution (ex. `720p`) · Durée (ex. `4s`) · Bascule audio      |
| **Graphique** | Sortie vectorielle SVG ; icônes, logos, diagrammes, illustrations stylisées    | Claude 4.6 Opus, Gemini 3.1 Pro Preview                         | Bascule animé                                                                    |

<Note>
  La liste des modèles change fréquemment. Le tableau reflète ce qui est actuellement disponible ; vérifiez le menu déroulant dans le produit pour ce que votre compte peut utiliser aujourd'hui.
</Note>

Pour savoir ce qu'est chaque type de frame et ce que vous pouvez en faire une fois créé, voir [Frames](/references/design/frames).

#### Joindre des références visuelles

Avant de générer, vous pouvez joindre des éléments déjà présents sur votre tableau comme références visuelles. L'Agent utilise ces références pour guider le résultat afin qu'il corresponde à l'apparence de votre projet. Ouvrez le menu **+** à l'intérieur du formulaire **Générer un média**, puis choisissez une option :

* **Télécharger un fichier** : téléchargez une image depuis votre ordinateur pour l'utiliser comme référence.
* **Sélectionner des éléments du canvas** : choisissez des éléments existants sur le tableau. Les frames sont capturées sous forme de captures d'écran ; les formes de texte et de notes sont jointes en tant que résumés textuels.

Chaque référence apparaît sous forme de puce dans le formulaire. Ajoutez autant que nécessaire, rédigez votre invite, puis sélectionnez **Générer**. Pour supprimer une référence, sélectionnez la puce.

<Frame caption="Le formulaire Générer un média avec le menu + ouvert, affichant Télécharger un fichier et Sélectionner des éléments du canvas.">
  <img src="https://mintcdn.com/replit/77YMTrJyoo7tOA9T/images/replitai/canvas-generate-media-references.png?fit=max&auto=format&n=77YMTrJyoo7tOA9T&q=85&s=65012e52d8f54671b22e1f27cb153a13" alt="Le formulaire Générer un média sur Canvas avec le menu plus ouvert, affichant les options Télécharger un fichier et Sélectionner des éléments du canvas et le menu déroulant de modèle défini sur Nano Banana Pro" width="1134" height="662" data-path="images/replitai/canvas-generate-media-references.png" />
</Frame>

<Note>
  ChatGPT Images 2.0 ne prend pas en charge les téléchargements pour le moment. Changez de modèle, par exemple vers Nano Banana Pro, pour joindre des références visuelles.
</Note>

Lorsque le **menu Ajouter** est activé, le bouton Générer est remplacé par un menu **+** qui regroupe les types du popover avec **Design** (une maquette visuelle autonome qui ne touche pas le code en direct) :

**Accès :** Génération d'images. **Graphique vectoriel** nécessite la génération de graphiques vectoriels ; **Vidéo** nécessite la génération de vidéos. Le menu **+** nécessite le menu Ajouter (qui lui-même nécessite la génération d'images).

## Raccourcis clavier

| Raccourci                    | Action                                    |
| ---------------------------- | ----------------------------------------- |
| `V`                          | Activer l'outil Interagir                 |
| `H`                          | Activer l'outil Panoramique               |
| Maintenir `Espace` + glisser | Panoramique depuis n'importe quel outil   |
| `Cmd` / `Ctrl` + défilement  | Zoom                                      |
| `Cmd` / `Ctrl` + `+`         | Zoom avant                                |
| `Cmd` / `Ctrl` + `-`         | Zoom arrière                              |
| `Cmd` / `Ctrl` + `0`         | Réinitialiser le zoom                     |
| `Maj` + clic                 | Ajouter une frame à la sélection actuelle |
| `Échap`                      | Désélectionner                            |

## Gestes du tableau

Le panoramique, le zoom et la sélection fonctionnent depuis n'importe quel outil sauf indication contraire.

**Panoramique :**

* Pavé tactile : glissement à deux doigts.
* Souris : maintenir le bouton du milieu et glisser, ou maintenir la barre d'espace et glisser avec le bouton gauche.
* Outil Panoramique : cliquer-et-glisser avec le bouton gauche de la souris.

**Zoom :**

* Pavé tactile : pincement.
* Souris : `Ctrl` (ou `Cmd` sur macOS) + molette de défilement.
* Clavier : `Cmd`/`Ctrl` + `+` pour zoomer, `Cmd`/`Ctrl` + `-` pour dézoomer, `Cmd`/`Ctrl` + `0` pour réinitialiser le zoom.

Le zoom est ancré sur le curseur, de sorte que le point sous le curseur reste fixe tandis que le reste du tableau se met à l'échelle autour de lui.

**Sélection :**

* Frame unique : cliquez dessus avec l'outil Interagir.
* Sélection multiple : maintenez `Maj` et cliquez sur chaque frame, ou faites glisser un rectangle de sélection sur le tableau.
* Désélectionner : cliquez sur une zone vide ou appuyez sur `Échap`.

La sélection d'une ou plusieurs frames fait apparaître la [barre d'action par frame](/references/design/frames#per-frame-action-bar) et joint ces frames au prochain message de l'Agent en tant que captures instantanées.

## Pages associées

* [Canvas](/references/design/canvas) — vue d'ensemble et anatomie.
* [Frames](/references/design/frames) — types de frames ; la barre d'action par frame ; Réimaginer, Affiner, Annoter et Construire.
* [Éléments](/references/design/elements) — les pièces individuelles à l'intérieur d'une frame.
* [Éditeur visuel](/learn/design/visual-editor) — le flux de ciblage des éléments dans lequel Modifier vous amène.
