Qiita Engineer Festa20242024年7月17日まで開催中！

Claude 3.5 Sonnet ArtifactsのSVG作成を試してみる

Posted at 2024-06-21

突如として発表されたClaude 3.5 SonnetのArtifacts!!
もう圧巻ですね。圧巻以外の何物でもない。

Introducing Claude 3.5 Sonnet—our most intelligent model yet.

This is the first release in our 3.5 model family.

Sonnet now outperforms competitor models on key evaluations, at twice the speed of Claude 3 Opus and one-fifth the cost.

Try it for free: https://t.co/uLbS2JMEK9 pic.twitter.com/qz569rES18
— Anthropic (@AnthropicAI) June 20, 2024

ChatGPT研究所様が、そのすごさをnoteにまとめてくださっています。

Anthropic社は突如として"Claude 3.5 Sonnet"をリリース
ㅤ
現状最強だったGPT-4oの性能を上回る上に、Claude 3 Opusの2倍の速度でこれまでの5分の1のコストに。

また新しく、"Artifacts"という新機能が登場。Xで早速Artifacts機能のすごい事例が報告されています。
厳選して10個まとめました🧵👇
— ChatGPT研究所 (@ctgptlb) June 20, 2024

言語理解が凄い
数学的推論と問題解決力が凄い
コーディングに強みを持つ
マルチモーダル
処理速度が速い
安い（入力トークンあたり$3、出力トークンあたり$15）

異常なレースですね・・・💦
使用してみた事例の中でも SVG作成機能が個人的に気になったので、Power Appsでロード画面作ってみました！
そこまでの過程を書いてみます！

Claude 3.5 Sonnetで作ったPower Appsの待機用画面。
最高だ🚀 pic.twitter.com/6SgvgAnHZB
— 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) June 21, 2024

単純なSVG作成を手伝ってもらう

まずはClaude 3.5 Sonnetを開きます。

Freeプランで今回は検証しています。
使用制限があり、メッセージの制限は、ニーズによって変化するとのこと。
本日は初日で使い切ってしまいました。

お試しの範囲であれば、その威力を十分に感じられます。
さっそくTry on Claude.aiをクリック。

そしてArtifacts の機能を ONにしてからさっそくプロンプトを渡してみましょう。

Power AppsのためのSVGを描画する

下記のようなざっくりとしたプロンプトを渡してみます。

Power Appsで表現するコンテンツを作りたいです。 試しにSVGの作成と描画をお願いします。

そうすると、Power Fxを含めた解説をもらえます！

Answer

"data:image/svg+xml," & EncodeUrl(<SVGコード>)

By Claude 3.5

Claude 3.5のとおりEncodeUrl 関数はSVGの描画で活躍します。

svgはApp.Formulasにまとめる前提で、下記のような関数にしました。

Image

$"data:image/svg+xml,{EncodeUrl(svg_name)}"

単純な図形の並び

Claude 3.5 Sonnetの機能、凄い・・・
Power AppsのSVGの作成から描画まで一瞬で丁寧にやってくれる

UI美しい pic.twitter.com/lq8JFQYG05
— 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) June 21, 2024

サクっと作ってくれました。

svg

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
  <rect x='10' y='10' width='180' height='180' fill='#f0f0f0' stroke='#000000' stroke-width='2'/>
  <circle cx='100' cy='100' r='50' fill='#ff6b6b'/>
  <polygon points='100,40 60,160 140,160' fill='#4ecdc4'/>
  <text x='100' y='185' font-family='Arial' font-size='16' text-anchor='middle'>Power Apps SVG</text>
</svg>

Power Appsなので'``シングルクオーテーションで囲みます。
svgを変数に入れておくと簡単に呼び出せます。

動く図形

Claude 3.5 Sonnet凄すぎ・・・ pic.twitter.com/Nw6TQYrFpJ
— 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) June 21, 2024

動くsvg

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
  <rect x='0' y='0' width='200' height='200' fill='#f0f0f0'/>
  <g transform='translate(100 100)'>
    <circle r='50' fill='#4ecdc4'>
      <animate attributeName='r' values='50;40;50' dur='4s' repeatCount='indefinite' />
    </circle>
    <rect x='-25' y='-25' width='50' height='50' fill='#ff6b6b'>
      <animateTransform attributeName='transform' type='rotate' from='0' to='360' dur='4s' repeatCount='indefinite' />
    </rect>
    <polygon points='0,-30 26,15 -26,15' fill='#45b7d7'>
      <animateTransform attributeName='transform' type='rotate' from='0' to='-360' dur='6s' repeatCount='indefinite' />
    </polygon>
  </g>
  <text x='100' y='185' font-family='Arial' font-size='16' text-anchor='middle' fill='#333'>
    Animated Power Apps SVG
    <animate attributeName='fill' values='#333;#777;#333' dur='4s' repeatCount='indefinite' />
  </text>
</svg>

一瞬で作ってくださいました。
アドバンスで下記のプロンプトを渡してみます。

プロンプト

美しいですが今までのデザインに引っ張られている気がします。例えば宇宙を模したデザインに変えられますか？

これで前述に紹介した宇宙風の描画ができました。

宇宙風

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
  <defs>
    <radialGradient id='starfield' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'>
      <stop offset='0%' stop-color='#000033'/>
      <stop offset='100%' stop-color='#000011'/>
    </radialGradient>
    <filter id='glow'>
      <feGaussianBlur stdDeviation='1.5' result='coloredBlur'/>
      <feMerge>
        <feMergeNode in='coloredBlur'/>
        <feMergeNode in='SourceGraphic'/>
      </feMerge>
    </filter>
  </defs>
  
  <!-- 宇宙の背景 -->
  <rect width='200' height='200' fill='url(#starfield)'/>
  
  <!-- 星々 -->
  <g>
    <circle cx='20' cy='30' r='1' fill='white' opacity='0.8'>
      <animate attributeName='opacity' values='0.8;0.2;0.8' dur='3s' repeatCount='indefinite'/>
    </circle>
    <circle cx='170' cy='50' r='1.2' fill='white' opacity='0.6'>
      <animate attributeName='opacity' values='0.6;0.1;0.6' dur='4s' repeatCount='indefinite'/>
    </circle>
    <circle cx='150' cy='180' r='0.8' fill='white' opacity='0.7'>
      <animate attributeName='opacity' values='0.7;0.3;0.7' dur='3.5s' repeatCount='indefinite'/>
    </circle>
    <!-- 追加の星をここに記述 -->
  </g>
  
  <!-- 惑星 -->
  <circle cx='160' cy='40' r='15' fill='#1a8cff' opacity='0.8' filter='url(#glow)'>
    <animate attributeName='cy' values='40;45;40' dur='10s' repeatCount='indefinite'/>
  </circle>
  
  <!-- 彗星 -->
  <g>
    <path d='M-10,80 Q100,100 210,120' stroke='white' stroke-width='2' fill='none' opacity='0'>
      <animate attributeName='opacity' values='0;0.3;0' dur='5s' repeatCount='indefinite'/>
      <animate attributeName='d' values='M-10,80 Q100,100 210,120; M-10,90 Q100,110 210,130; M-10,80 Q100,100 210,120' dur='5s' repeatCount='indefinite'/>
    </path>
  </g>
  
  <!-- ローディングインジケーター -->
  <g transform='translate(100,100)'>
    <circle r='30' fill='none' stroke='#ffffff' stroke-width='2' opacity='0.8'>
      <animate attributeName='r' values='30;35;30' dur='2s' repeatCount='indefinite'/>
    </circle>
    <circle r='20' fill='none' stroke='#ffffff' stroke-width='2' opacity='0.6'>
      <animate attributeName='r' values='20;25;20' dur='2s' repeatCount='indefinite' begin='0.5s'/>
    </circle>
    <circle r='10' fill='#ffffff' opacity='0.4'>
      <animate attributeName='opacity' values='0.4;0.8;0.4' dur='2s' repeatCount='indefinite'/>
    </circle>
  </g>
  
  <!-- ローディングテキスト -->
  <text x='100' y='180' font-family='Arial' font-size='16' text-anchor='middle' fill='#ffffff' opacity='0.8'>
    Please wait...
    <animate attributeName='opacity' values='0.8;0.3;0.8' dur='3s' repeatCount='indefinite'/>
  </text>
</svg>

最後にシューティングゲーム風のSVGも書いてもらいましょう。
結果はコチラ！

シューティングゲーム

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'>
  <defs>
    <radialGradient id='space' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'>
      <stop offset='0%' stop-color='#000033'/>
      <stop offset='100%' stop-color='#000011'/>
    </radialGradient>
    <filter id='glow' x='-50%' y='-50%' width='200%' height='200%'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='2' result='blur'/>
      <feMerge>
        <feMergeNode in='blur'/>
        <feMergeNode in='SourceGraphic'/>
      </feMerge>
    </filter>
  </defs>
  
  <!-- 宇宙の背景 -->
  <rect width='300' height='200' fill='url(#space)'/>
  
  <!-- 星々 -->
  <g>
    <circle cx='30' cy='40' r='1' fill='white'/>
    <circle cx='130' cy='20' r='1.2' fill='white'/>
    <circle cx='230' cy='80' r='0.8' fill='white'/>
    <circle cx='280' cy='150' r='1' fill='white'/>
    <circle cx='180' cy='190' r='1.1' fill='white'/>
    <circle cx='50' cy='100' r='0.9' fill='white'/>
    <circle cx='200' cy='30' r='1' fill='white'/>
    <circle cx='100' cy='170' r='1.2' fill='white'/>
  </g>
  
  <!-- 宇宙船とレーザー -->
  <g>
    <animateTransform
      attributeName='transform'
      type='translate'
      values='0,0; 100,0; 0,0; -100,0; 0,0'
      dur='6s'
      repeatCount='indefinite'
    />
    <!-- 飛行機型の宇宙船 (小さくした) -->
    <g transform='translate(150, 170)' filter='url(#glow)'>
      <path d='M-10,6 L0,-12 L10,6 L0,3 Z' fill='#4fc3f7'/>
      <path d='M-7,3 L-13,9 L-7,6 M7,3 L13,9 L7,6' fill='#4fc3f7'/>
      <!-- エンジンの輝き -->
      <circle cx='0' cy='6' r='3' fill='#ff9800'>
        <animate attributeName='opacity' values='0.5;1;0.5' dur='0.5s' repeatCount='indefinite'/>
      </circle>
    </g>
    
    <!-- レーザービーム -->
    <line x1='150' y1='158' x2='150' y2='0' stroke='#ff4081' stroke-width='2' filter='url(#glow)'>
      <animate attributeName='y2' 
               values='158;0;158' 
               dur='0.5s' 
               repeatCount='indefinite'/>
      <animate attributeName='opacity' 
               values='0;1;0' 
               dur='0.5s' 
               repeatCount='indefinite'/>
    </line>
  </g>
  
  <!-- 隕石 (散らばらせたまま) -->
  <g>
    <circle cx='50' cy='0' r='5' fill='#ffd54f'>
      <animate attributeName='cy' 
               values='-10;220' 
               dur='3s' 
               repeatCount='indefinite'/>
    </circle>
    <circle cx='150' cy='-30' r='7' fill='#ffa726'>
      <animate attributeName='cy' 
               values='-30;250' 
               dur='4s' 
               repeatCount='indefinite'/>
    </circle>
    <circle cx='250' cy='-50' r='4' fill='#ffcc80'>
      <animate attributeName='cy' 
               values='-50;230' 
               dur='3.5s' 
               repeatCount='indefinite'/>
    </circle>
    <circle cx='100' cy='-70' r='6' fill='#ffb74d'>
      <animate attributeName='cy' 
               values='-70;240' 
               dur='4.5s' 
               repeatCount='indefinite'/>
    </circle>
    <circle cx='200' cy='-20' r='5' fill='#ffd54f'>
      <animate attributeName='cy' 
               values='-20;230' 
               dur='3.8s' 
               repeatCount='indefinite'/>
    </circle>
  </g>
</svg>

Power Appsとの組み合わせ

Navigate関数でSVGが入った画面に遷移し、一時的に待機をしてもらうなど対処ができそうです。
なかなかハードルが高い領域に手を加えられることは嬉しいですね！

引き続き情報をキャッチして、Power Apps、Power Automateとコラボレーションしていきたいと思います！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up