{"id":1516,"date":"2024-08-12T07:48:17","date_gmt":"2024-08-12T05:48:17","guid":{"rendered":"https:\/\/artificiellementintelligent.wordpress.com\/?p=1516"},"modified":"2024-08-12T07:48:17","modified_gmt":"2024-08-12T05:48:17","slug":"a-la-decouverte-de-claude-3-5-sonnet-et-d-artifacts","status":"publish","type":"post","link":"https:\/\/artificiellementintelligent.eu\/index.php\/2024\/08\/12\/a-la-decouverte-de-claude-3-5-sonnet-et-d-artifacts\/","title":{"rendered":"A la d\u00e9couverte de Claude 3.5 Sonnet et d&rsquo; Artifacts"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">La soci\u00e9t\u00e9 <em>Anthropic<\/em> est bien connue pour ses mod\u00e8les de langage appel\u00e9s Claude.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anthropic est -avec Google- le principal concurrent d&rsquo; OpenAI et poss\u00e8de d&rsquo; excellents mod\u00e8les disponibles en trois tailles :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Claude 3.5 Opus<\/em> : le mod\u00e8le le plus puissant mais le plus lent;<\/li>\n\n\n\n<li><em>Claude 3.5 Sonnet<\/em> : mod\u00e8le interm\u00e9diaire en termes de rapidit\u00e9 et de comp\u00e9tence;<\/li>\n\n\n\n<li><em>Claude 3.5 Haiku<\/em> : un mod\u00e8le l\u00e9ger et rapide.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Le mod\u00e8le Claude 3.5 Sonnet est accessible \u00e0 tout le monde sur <a href=\"https:\/\/claude.ai\">Claude.ai<\/a> sans devoir payer, moyennant certaines limites d&rsquo;utilisation. Je vous conseille de l&rsquo;essayer, il fonctionne bien et le style des r\u00e9ponses diff\u00e8re de celui de ChatGPT (je trouve le style de Claude plus humain et moins formel quel celui de ChatGPT4o).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Claude 3.5 n&rsquo;offre pas de capacit\u00e9 de g\u00e9n\u00e9ration d&rsquo;images, mais il offre une fonctionnalit\u00e9 tr\u00e8s int\u00e9ressante et pratique appel\u00e9e <em>Artifacts<\/em> qui va beaucoup faciliter le travail interactif avec le mod\u00e8le lors de la g\u00e9n\u00e9ration d&rsquo; un document, d&rsquo; une figure etc&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Encore mieux, cette fonctionnalit\u00e9 est accessible \u00e0 tous les utilisateurs, m\u00eame gratuits. Voyons comment en tirer parti au mieux.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Qu&rsquo; est-ce que Claude Artifacts ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Imaginez que vous demandez \u00e0 Claude de g\u00e9n\u00e9rer un document. Gr\u00e2ce \u00e0 Artifacts, ce dernier sera g\u00e9n\u00e9r\u00e9 dans une fen\u00eatre s\u00e9par\u00e9e, tandis que le flux conversationnel habituel reste disponible pour continuer le dialogue avec le mod\u00e8le et demander d&rsquo; \u00e9ventuelles am\u00e9liorations au texte. Encore mieux, ce dernier sera alors modifi\u00e9 dans la fen\u00eatre d\u00e9di\u00e9e, et les versions successives sont enregistr\u00e9es ce qui permet \u00e0 l&rsquo;utilisateur de revenir \u00e0 une version pr\u00e9c\u00e9dente si n\u00e9cessaire.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez aussi copier le contenu de l&rsquo; art\u00e9fact dans votre presse-papiers ou t\u00e9l\u00e9charger un fichier pour le r\u00e9utiliser facilement en dehors de la conversation. Ces options se trouvent dans le coin inf\u00e9rieur droit de la fen\u00eatre de l&rsquo; artefact.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les art\u00e9facts vous permettent donc de co-cr\u00e9er du contenu dans une fen\u00eatre s\u00e9par\u00e9e &#8211; plus besoin de copier\/coller syst\u00e9matiquement \u00e0 partir du chat. Cet ajout fait passer Claude d&rsquo;une IA conversationnelle \u00e0 un environnement de travail collaboratif, permettant aux utilisateurs d&rsquo;interagir avec le contenu g\u00e9n\u00e9r\u00e9 par l&rsquo;IA de mani\u00e8re plus dynamique et conviviale.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La vid\u00e9o de d\u00e9monstration fournie par Anthropic montre bien la g\u00e9n\u00e9ration s\u00e9par\u00e9e des figures et du code \u00e0 droite du dialogue :<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"embed-youtube\"><iframe loading=\"lazy\" title=\"Claude 3.5 Sonnet for sparking creativity\" width=\"676\" height=\"380\" src=\"https:\/\/www.youtube.com\/embed\/rHqk0ZGb6qo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2. Activer Claude Artifacts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pour acc\u00e9der \u00e0 Claude Artifacts, vous devez l&rsquo;activer dans les param\u00e8tres. Tout d&rsquo;abord, cliquez sur les initiales de votre compte, puis sur <em>Feature Preview<\/em>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/artificiellementintelligent.wordpress.com\/wp-content\/uploads\/2024\/08\/image-20240811a.png\" alt=\"\" class=\"wp-image-1524\" \/><figcaption class=\"wp-element-caption\">Figure 1 : Acc\u00e8s aux param\u00e8tres<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Ensuite, activez les artefacts en basculant le commutateur sur <em>On<\/em>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/artificiellementintelligent.wordpress.com\/wp-content\/uploads\/2024\/08\/image-20240811b.png\" alt=\"\" class=\"wp-image-1526\" \/><figcaption class=\"wp-element-caption\">Figure 2 : Activation d&rsquo; Artifacts<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Une fois activ\u00e9e, vous pouvez d\u00e9clencher la fonctionnalit\u00e9 en demandant \u00e0 Claude de g\u00e9n\u00e9rer du contenu qui peut \u00eatre affich\u00e9 dans un art\u00e9fact, comme du code, des visualisations de donn\u00e9es ou m\u00eame des maquettes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Utilisations possibles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En proposant diff\u00e9rents types d&rsquo; art\u00e9facts, Claude s&rsquo; assure que les utilisateurs disposent des bons outils pour une vari\u00e9t\u00e9 de t\u00e2ches. Concr\u00e8tement, on peut distinguer trois principaux cas d&rsquo; utilisation :<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les <em><strong>art\u00e9facts textuels<\/strong><\/em> comprennent le texte brut, les textes au format <em>markdown<\/em> et les documents format\u00e9s. Ils sont utiles pour les t\u00e2ches d&rsquo; \u00e9criture, l&rsquo; \u00e9dition de documents et d&rsquo; autres projets n\u00e9cessitant beaucoup de texte. La fen\u00eatre d&rsquo; art\u00e9fact pr\u00e9sentera les versions successives du texte \u00e0 travers les demandes de modification de l&rsquo; utilisateur.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dans la figure ci-dessous, vous verrez que j&rsquo; ai demand\u00e9 \u00e0 Claude de g\u00e9n\u00e9rer une histoire fictive, puis je lui ai demand\u00e9 de la modifier (toujours dans le dialogue) en ajoutant une dimension romantique. Les deux versions de l&rsquo; histoire sont accessibles via le bouton \u00ab\u00a0version\u00a0\u00bb en bas, et t\u00e9l\u00e9chargeables via les ic\u00f4nes en bas \u00e0 droite.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/artificiellementintelligent.wordpress.com\/wp-content\/uploads\/2024\/08\/image-20240811c.png\" alt=\"\" class=\"wp-image-1527\" \/><figcaption class=\"wp-element-caption\">Figure 3 : Art\u00e9fact textuel &#8211; cr\u00e9ation d&rsquo; un texte de fiction<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Les<strong> <em>art\u00e9facts visuels<\/em><\/strong> sont des images et\/ou des graphiques vectoris\u00e9s <em>SVG<\/em>. Ils sont id\u00e9aux pour les projets qui n\u00e9cessitent des \u00e9l\u00e9ments visuels, comme la cr\u00e9ation d&rsquo; infographies. Claude peut g\u00e9n\u00e9rer ces artefacts pour aider les utilisateurs \u00e0 pr\u00e9senter des donn\u00e9es de mani\u00e8re visuelle, avec la possibilit\u00e9 d&rsquo; it\u00e9rer sur les cr\u00e9ations propos\u00e9es jusqu&rsquo; \u00e0 obtention d&rsquo;un r\u00e9sultat satisfaisant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voici un exemple dans lequel je demande \u00e0 Claude de g\u00e9n\u00e9rer une image stylis\u00e9e au format <em>SVG<\/em> repr\u00e9sentant le <em>Corcovado<\/em> (Christ R\u00e9dempteur) qui surplombe Rio de Janeiro. Ici encore, deux it\u00e9rations ont \u00e9t\u00e9 faites :<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/artificiellementintelligent.wordpress.com\/wp-content\/uploads\/2024\/08\/image-20240811d.png\" alt=\"\" class=\"wp-image-1529\" \/><figcaption class=\"wp-element-caption\">Figure 4 : Art\u00e9fact visuel &#8211; cr\u00e9ation d&rsquo;un fichier SVG<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Les <em><strong>art\u00e9facts de codage<\/strong><\/em> sont des extraits de code que les utilisateurs peuvent copier, modifier et ex\u00e9cuter. Ils sont particuli\u00e8rement utiles aux d\u00e9veloppeurs qui recherchent des solutions rapides ou qui tentent de comprendre des segments de code complexes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une remarque est que les art\u00e9facts ne poss\u00e9dant pas d&rsquo; environnement propre d&rsquo; ex\u00e9cution du code, il d\u00e9pendent pour cela des capacit\u00e9s du navigateur. La capacit\u00e9 de pr\u00e9visualisation du r\u00e9sultat n&rsquo; est donc pas toujours disponible : cela d\u00e9pend du type du contenu. il m&rsquo;a fallu un peu de temps pour comprendre cela.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/artificiellementintelligent.wordpress.com\/wp-content\/uploads\/2024\/08\/image-20240811e.png\" alt=\"\" class=\"wp-image-1531\" \/><figcaption class=\"wp-element-caption\">Figure 5 : Art\u00e9fact de codage &#8211; programmation d&rsquo;un jeu de \u00ab\u00a0Snake\u00a0\u00bb <\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Bonne d\u00e9couverte !<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sources et r\u00e9f\u00e9rences<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Anthropic : Meet Claude<\/em> : <a href=\"https:\/\/www.anthropic.com\/claude\">https:\/\/www.anthropic.com\/claude<\/a><br><\/li>\n\n\n\n<li><em>Claude vs ChatGPT, what&rsquo;s the difference in 2024 ?<\/em> par Ryan Kane pour Zapier, le 16 juillet 2024 : <a href=\"https:\/\/zapier.com\/blog\/claude-vs-chatgpt\/\">https:\/\/zapier.com\/blog\/claude-vs-chatgpt\/<\/a><br><\/li>\n\n\n\n<li><em>What Is Claude 3.5 Sonnet? How It Works, Use Cases, and Artifacts<\/em>, par Alex Olteanu en juillet 2024 pour Datacamp : <a href=\"https:\/\/www.datacamp.com\/blog\/claude-sonnet-anthropic\">https:\/\/www.datacamp.com\/blog\/claude-sonnet-anthropic<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anthropic, a major competitor of OpenAI, offers powerful language models called Claude, available in three sizes. Claude 3.5 Sonnet, accessible for free with limitations, features the Artifacts functionality, enabling collaborative content creation.  Artifacts include textual, visual, and coding elements, expanding Claude&rsquo;s capabilities for various creative tasks.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-1516","post","type-post","status-publish","format-standard","hentry","category-modeles-de-langage","post-preview"],"_links":{"self":[{"href":"https:\/\/artificiellementintelligent.eu\/index.php\/wp-json\/wp\/v2\/posts\/1516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artificiellementintelligent.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artificiellementintelligent.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artificiellementintelligent.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artificiellementintelligent.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1516"}],"version-history":[{"count":0,"href":"https:\/\/artificiellementintelligent.eu\/index.php\/wp-json\/wp\/v2\/posts\/1516\/revisions"}],"wp:attachment":[{"href":"https:\/\/artificiellementintelligent.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artificiellementintelligent.eu\/index.php\/wp-json\/wp\/v2\/categories?post=1516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artificiellementintelligent.eu\/index.php\/wp-json\/wp\/v2\/tags?post=1516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}