{"id":82663,"date":"2020-10-06T12:52:01","date_gmt":"2020-10-06T12:52:01","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=blog&#038;p=82663"},"modified":"2020-10-09T08:55:55","modified_gmt":"2020-10-09T08:55:55","slug":"l-intelligence-du-code-au-service-de-la-creation-graphique","status":"publish","type":"blog","link":"https:\/\/blog.jetbrains.com\/fr\/blog\/2020\/10\/06\/l-intelligence-du-code-au-service-de-la-creation-graphique\/","title":{"rendered":"L&#8217;intelligence du code au service de la cr\u00e9ation graphique"},"content":{"rendered":"<p><span><em><strong>beaut\u00e9<\/strong><\/em><br \/>\/bo\u00b7t\u00e9\/<br \/><em>Caract\u00e9ristique provenant de manifestions telle que l&#8217;aspect visuel, la forme, le mouvement ou le son, qui au travers d&#8217;une exp\u00e9rience sensorielle ou intellectuelle procure une sensation de plaisir ou un sentiment de satisfaction.<\/em><\/span><\/p>\n<p>Que se passe-t-il lorsque vous entra\u00eenez une machine \u00e0 cr\u00e9er du <strong>beau<\/strong>\u00a0? Vous passez \u00e0 <strong>un niveau sup\u00e9rieur de la creation graphique g\u00e9n\u00e9r\u00e9e par du code<\/strong>.<\/p>\n<p>Chez JetBrains, nous y avons recours afin de cr\u00e9er des graphismes originaux pour tous nos \u00e9crans, banni\u00e8res et illustrations graphiques. Chacun de nos produit a un design unique et rend le bureau de son utilisateur plus agr\u00e9able et esth\u00e9tique.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-10034\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/cai2020_blog_featured-1.png\" alt=\"JetBrains Artwork Generator v4\" width=\"1200\" height=\"800\"><\/p>\n<h2>Nouveaut\u00e9s<\/h2>\n<p>La nouvelle version de notre Artwork Generator utilise un r\u00e9seau neuronal pour produire des cr\u00e9ations graphiques anim\u00e9es et statiques.<\/p>\n<p>Les image produites par notre g\u00e9n\u00e9rateur d&#8217;images sont essentiellement des paysages cr\u00e9\u00e9s par la fonction de cartographie du r\u00e9seau neuronal par anticipation. Bien que nous ayons apport\u00e9 quelques modifications en interne pour les am\u00e9liorer, ces images r\u00e9sultent principalement des donn\u00e9es transmise aux r\u00e9seaux.<\/p>\n<div style=\"width: 1200px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]--><br \/>\n<video class=\"wp-video-shortcode\" id=\"video-82663-1\" width=\"1200\" height=\"100\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/resources.jetbrains.com\/storage\/products\/blog\/wp-content\/uploads\/cai2020_blog_video.mp4?_=1\" \/><a href=\"https:\/\/resources.jetbrains.com\/storage\/products\/blog\/wp-content\/uploads\/cai2020_blog_video.mp4\" target=\"_blank\" rel=\"noopener\">https:\/\/resources.jetbrains.com\/storage\/products\/blog\/wp-content\/uploads\/cai2020_blog_video.mp4<\/a><\/video><\/div>\n<p><span id=\"more-78653\"><\/span><\/p>\n<p>L&#8217;outil cl\u00e9 pour g\u00e9n\u00e9rer facilement des images agr\u00e9ables \u00e0 l&#8217;\u0153il est le <em>mode Mixer<\/em>. Il utilise les images que vous avez aim\u00e9es pour produire de nouvelles images visuellement similaires. L&#8217;impl\u00e9mentation d&#8217;un algorithme g\u00e9n\u00e9tique\u00a0permet de combiner les param\u00e8tres des images s\u00e9lectionn\u00e9es pour qu&#8217;elles puissent \u00e9voluer et donner quelque chose de totalement nouveau. En exploitant les informations sur les images que les utilisateurs ont choisies nous pouvons entra\u00eener un mod\u00e8le de classification binaire \u00e0 d\u00e9duire quel ensemble de param\u00e8tres permet de cr\u00e9er une image qui sera consid\u00e9r\u00e9e comme belle.<\/p>\n<p>L&#8217;utilisation des r\u00e9seaux neuronaux est donc double\u00a0: elle sert au processus de g\u00e9n\u00e9ration d&#8217;images lui-m\u00eame et \u00e0 la recherche des conditions initiales optimales du processus afin de produire des r\u00e9sultats attrayants.<\/p>\n<p>Vous avez ainsi la possibilit\u00e9 de cr\u00e9er un fond d&#8217;\u00e9cran pour votre bureau qui soit <em>v\u00e9ritablement unique et corresponde \u00e0 vos go\u00fbt<\/em> . Visitez la page <strong><a href=\"https:\/\/www.jetbrains.com\/fr-fr\/company\/brand\/desktop-art\/\" target=\"_blank\" rel=\"noopener noreferrer\">Art pour Desktop <\/a><\/strong><span style=\"font-weight: 400;\"> sur notre site web ou rendez-vous directement sur <\/span><strong><a href=\"http:\/\/code2art.jetbrains.com\" target=\"_blank\" rel=\"noopener noreferrer\">code2art.jetbrains.com<\/a><\/strong><span style=\"font-weight: 400;\">. Pour en savoir plus sur le fonctionnement du R\u00e9seau Neuronal, consultez le <\/span><strong><a href=\"https:\/\/view.datalore.jetbrains.com\/notebook\/uBqHpBMM4DDSTVln3bofXT\" target=\"_blank\" rel=\"noopener noreferrer\">notebook Datalore<\/a><\/strong><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p style=\"text-align: center;\"><a class=\"jb-download-button\" title=\"Explore Artwork Generator\" href=\"https:\/\/www.jetbrains.com\/fr-fr\/company\/brand\/desktop-art\/\" target=\"_blank\" rel=\"noopener noreferrer\">D\u00e9couvrez le Graphisme pour Desktop<\/a><\/p>\n<p><span style=\"font-weight: 400;\">Voici quelques exemples de ce que vous pouvez faire avec le g\u00e9n\u00e9rateur.<\/span><\/p>\n<\/p>\n<p><em><span style=\"font-weight: 400;\">\u0112age<\/span><\/em><br \/><a href=\"https:\/\/code2art.jetbrains.com\/#scene:59d9-b945\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-10039\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/img1-1.png\" width=\"1200\" height=\"800\"><\/a><\/p>\n<\/p>\n<p><em><span style=\"font-weight: 400;\">Kubrik<\/span><\/em><br \/><a href=\"https:\/\/code2art.jetbrains.com\/#scene:542b-cb32\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-10039\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/img2-1.png\" alt=\"Kubrik\" width=\"1200\" height=\"800\"><\/a><\/p>\n<\/p>\n<p><em><span style=\"font-weight: 400;\">Venus<\/span><\/em><br \/><a href=\"https:\/\/code2art.jetbrains.com\/#scene:8859-566e\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-10039\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/img3-1.png\" alt=\"Venus\" width=\"1200\" height=\"800\"><\/a><\/p>\n<h2>Fonctionnement de l&#8217;interface utilisateur graphique<\/h2>\n<p>Le front-end sert d&#8217;interface utilisateur en <em>mode Mixer<\/em> et de r\u00e9gulateur pour ajuster les r\u00e9sultats du r\u00e9seau neuronal en <em>mode Solo<\/em>. Le m\u00eame code front-end \u00e9tant utilis\u00e9 depuis la premi\u00e8re version du g\u00e9n\u00e9rateur, il a pu \u00eatre consid\u00e9rablement am\u00e9lior\u00e9 \u00e0 chaque nouvelle version. Cette fois, c&#8217;est la fonctionnalit\u00e9 de couches qui \u00e9t\u00e9 peaufin\u00e9e pour les faire appara\u00eetre comme des composants configurables s\u00e9par\u00e9s permettant de g\u00e9n\u00e9rer des images statiques ou mobiles ind\u00e9pendantes. De plus, la logique de l&#8217;interface utilisateur graphique est maintenant ind\u00e9pendante de toute repr\u00e9sentation visuelle et enfichable, de sorte qu&#8217;\u00e0 l&#8217;avenir il devrait \u00eatre possible de la connecter \u00e0 tout fournisseur visuel de curseurs de d\u00e9filement, entr\u00e9es et boutons.<\/p>\n<h2>Comment utiliser les nouvelles capacit\u00e9s de l&#8217;outil<\/h2>\n<p>Apr\u00e8s avoir choisi un produit dans la liste d\u00e9roulante, par exemple <strong>IntelliJ IDEA<\/strong> ou <strong>MPS<\/strong>, il suffit de cliquer sur le bouton <strong>Prescribed<\/strong> et vous obtenez un \u00e9cran de pr\u00e9sentation anim\u00e9e de ce produit.<\/p>\n<h3>Interagir avec le mode Mixer<\/h3>\n<p>Sur l&#8217;\u00e9cran initial, vous pouvez voir neuf images diff\u00e9rentes, chacune g\u00e9n\u00e9r\u00e9e pour vous individuellement par le r\u00e9seau neuronal. Nous avons appel\u00e9 ce mode <em>Mixer <\/em> car vous pouvez m\u00e9langer des id\u00e9es au hasard, s\u00e9lectionner celle\u00b7s que vous pr\u00e9f\u00e9rez et produire ainsi des cr\u00e9ations graphiques qui vous correspondent vraiment.<\/p>\n<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-10039\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/img4-1.png\" alt=\"Venus\" width=\"1200\" height=\"800\"><\/p>\n<p>Si aucune des images sugg\u00e9r\u00e9es ne vous pla\u00eet, appuyez sur <strong>Regenerate<\/strong> pour obtenir neuf nouvelles images diff\u00e9rentes des pr\u00e9c\u00e9dentes. Mais avant d&#8217;appuyer sur <strong>Regenerate<\/strong>, rappelez-vous que vous pouvez toujours affiner les images qui ont d\u00e9j\u00e0 \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9s pour vous. Nous approfondirons ce point plus tard. Si vous aimez certaines des images existantes, cliquez sur les images concern\u00e9es une par une puis appuyez sur le bouton <strong>Cross-breed<\/strong>. Les images s\u00e9lectionn\u00e9es seront conserv\u00e9es et de nouvelles images seront g\u00e9n\u00e9r\u00e9es \u00e0 partir de celles que vous avez s\u00e9lectionn\u00e9es. R\u00e9p\u00e9tez cette op\u00e9ration autant de fois que vous le souhaitez jusqu&#8217;\u00e0 ce que vous trouviez l&#8217;image parfaite.<\/p>\n<p>De plus, le r\u00e9seau neuronal apprend de vos choix et se familiarise avec la notion de beaut\u00e9 sur la base des donn\u00e9es collectives qu&#8217;il recueille. <em>Le mode Mixer<\/em> comprend un r\u00e9seau de neurones qui a d\u00e9j\u00e0 \u00e9t\u00e9  entra\u00een\u00e9 sur les choix des utilisateurs de JetBrains. Vous pouvez les comparer avec les v\u00f4tres ou d\u00e9sactiver le r\u00e9seau pr\u00e9-entra\u00een\u00e9 en passant de \u00ab\u00a0Trained by\u00a0\u00bb \u00e0 \u00ab\u00a0Wild\u00a0\u00bb.<\/p>\n<h3>Mode Solo<\/h3>\n<p>Double-cliquez sur n&#8217;importe quelle image en <em>mode Mixer<\/em> pour acc\u00e9der au <em>mode Solo<\/em>, o\u00f9 vous aurez le contr\u00f4le sur tous les aspects de l&#8217;image concern\u00e9e. Le dossier <strong>Neuro<\/strong> sur la droite comprend diff\u00e9rents curseurs de d\u00e9filement et cases \u00e0 cocher. N&#8217;h\u00e9sitez pas \u00e0 tester et \u00e0 exp\u00e9rimenter.<\/p>\n<p>Vous pouvez double-cliquer sur l&#8217;image \u00e0 tout moment pour revenir au <em>mode Mixer<\/em>.<\/p>\n<h3>Enregistrement<\/h3>\n<p>Lorsque vous \u00eates pr\u00eat \u00e0 partager la combinaison d&#8217;images parfaite ou si vous souhaitez revenir \u00e0 votre travail plus tard, il vous suffit d&#8217;appuyer sur le bouton <strong>Get URL<\/strong>. Cela g\u00e9n\u00e8re une URL unique dans la barre d&#8217;adresse de votre navigateur, que vous pouvez utiliser pour partager votre cr\u00e9ation actuelle ou pour y revenir plus tard.<\/p>\n<h3>Animation de l&#8217;image Solo<\/h3>\n<p>Appuyez sur le bouton <strong>Animate<\/strong> dans le <em>mode Solo<\/em> et attendez quelques instants. Notez que l&#8217;attente peut parfois \u00eatre un peu plus longue. Si c&#8217;est le cas, vous serez plac\u00e9 dans une file d&#8217;attente et pourrez voir quelle est votre position dans la file. Vous pouvez alors fermer l&#8217;onglet et revenir plus tard. Assurez-vous simplement d&#8217;enregistrer, puis appuyez \u00e0 nouveau sur <strong>Animate<\/strong> pour v\u00e9rifier le statut. Au final, vous obtiendrez une vid\u00e9o anim\u00e9e de votre image. C&#8217;est une boucle infinie comme le ruban de M\u00f6bius. Appuyez sur le bouton <strong>Back to static<\/strong> pour revenir \u00e0 la version statique de votre image.<br \/>\nVous pouvez g\u00e9n\u00e9rer une URL pour la sc\u00e8ne anim\u00e9e et la partager.<\/p>\n<h3>Exporter la vid\u00e9o<\/h3>\n<p>Si vous souhaitez t\u00e9l\u00e9charger un fichier .mp4, c&#8217;est possible\u00a0! Le processus est vraiment tr\u00e8s compliqu\u00e9, mais cela en vaut la peine. Blague \u00e0 part, en fait il vous suffit pour cela de cliquer sur le bouton <strong>Export Video<\/strong>\u00a0! <\/p>\n<p>Comme pour l&#8217;animation, il y a une file d&#8217;attente et une barre de progression, mais vous pouvez g\u00e9n\u00e9rer une URL pour enregistrer la sc\u00e8ne pendant le processus de rendu et l&#8217;utiliser pour revenir plus tard (vous pouvez fermer l&#8217;onglet du navigateur en toute s\u00e9curit\u00e9 pendant votre attente).<\/p>\n<h3>Vous pensez avoir de la chance\u00a0?<\/h3>\n<p>Alors appuyez sur le bouton <strong>I feel lucky<\/strong>. Le caract\u00e8re al\u00e9atoire non artificiel et non intelligent sugg\u00e9rera une combinaison de param\u00e8tres inattendus au hasard. M\u00eame des r\u00e9glages al\u00e9atoires peuvent donner un r\u00e9sultat esth\u00e9tique. Pas toujours, mais souvent<\/p>\n<h2>D\u00e9tails techniques<\/h2>\n<p>Techniquement, le c\u00f4t\u00e9 serveur est divis\u00e9 en plusieurs parties\u00a0:<\/p>\n<ul>\n<li>Le moteur de g\u00e9n\u00e9ration d&#8217;images bas\u00e9 sur un r\u00e9seau neuronal* con\u00e7u avec TensorFlow.<\/li>\n<li>Le moteur de rendu vid\u00e9o qui produit des vid\u00e9os \u00e0 partir des images.<\/li>\n<li>Le stockage de la sc\u00e8ne.<\/li>\n<li>La file d&#8217;attente des t\u00e2ches permettant de r\u00e9partir les t\u00e2ches exigeantes en termes de processeur et de GPU entre les composants du serveur.<\/li>\n<li><em>Le mode Mixer<\/em>\u00a0: l&#8217;outil permettant de faire \u00e9voluer les images g\u00e9n\u00e9r\u00e9es via des algorithmes g\u00e9n\u00e9tiques.\n<ul>\n<li>Il existe \u00e9galement un autre r\u00e9seau neuronal bas\u00e9 sur le <em>mode Mixer<\/em> et notre moteur de g\u00e9n\u00e9ration d&#8217;images qui agr\u00e8ge les pr\u00e9f\u00e9rences des utilisateurs afin de d\u00e9duire quelles images ont le plus de chance d&#8217;\u00eatre consid\u00e9r\u00e9es comme belles.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>*Le r\u00e9seau neuronal lui-m\u00eame a \u00e9t\u00e9 cr\u00e9\u00e9 dans <strong><a href=\"http:\/\/datalore.jetbrains.com\" target=\"_blank\" rel=\"noopener noreferrer\">Datalore by JetBrains<\/a><\/strong><span style=\"font-weight: 400;\">\u00a0: un notebook en ligne pour data scientists. Vous pouvez voir <\/span><strong><a href=\"https:\/\/view.datalore.jetbrains.com\/notebook\/uBqHpBMM4DDSTVln3bofXT\" target=\"_blank\" rel=\"noopener noreferrer\">ici<\/a><\/strong> les d\u00e9tails de l&#8217;architecture du r\u00e9seau. Vous pouvez cr\u00e9er votre version du notebook et exp\u00e9rimenter les param\u00e8tres du mod\u00e8le par vous-m\u00eame.<\/p>\n<p>Amusez-vous avec le g\u00e9n\u00e9rateur et pensez \u00e0 <strong>partager les r\u00e9sultats que vous obtenez sur les r\u00e9seaux sociaux avec le hastag #code2art et le tag @JetBrains<\/strong>. Nous avons h\u00e2te de d\u00e9couvrir vos cr\u00e9ations\u00a0!<\/p>\n<p>JetBrains<br \/>\nThe Drive to Develop<\/p>\n<p><em>Auteur de l&#8217;article original en anglais : <a href=\"https:\/\/blog.jetbrains.com\/author\/olga-andreevskikh-jetbrains-com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Olga Andreevskikh<\/a><\/em><\/p>\n","protected":false},"author":813,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[4918],"tags":[6322,3679,575],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog\/82663"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/users\/813"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/comments?post=82663"}],"version-history":[{"count":4,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog\/82663\/revisions"}],"predecessor-version":[{"id":161078,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog\/82663\/revisions\/161078"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media?parent=82663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/categories?post=82663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/tags?post=82663"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/cross-post-tag?post=82663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}