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

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

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Introducing Claude 3.5 Sonnet—our most intelligent model yet.<br><br>This is the first release in our 3.5 model family.<br><br>Sonnet now outperforms competitor models on key evaluations, at twice the speed of Claude 3 Opus and one-fifth the cost.<br><br>Try it for free: <a href="https://t.co/uLbS2JMEK9">https://t.co/uLbS2JMEK9</a> <a href="https://t.co/qz569rES18">pic.twitter.com/qz569rES18</a></p>&mdash; Anthropic (@AnthropicAI) <a href="https://twitter.com/AnthropicAI/status/1803790676988920098?ref_src=twsrc%5Etfw">June 20, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[ChatGPT研究所](https://x.com/ctgptlb)様が、[そのすごさをnote](https://chatgpt-lab.com/n/nb1b40d447056)にまとめてくださっています。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Anthropic社は突如として&quot;Claude 3.5 Sonnet&quot;をリリース<br>ㅤ<br>現状最強だったGPT-4oの性能を上回る上に、Claude 3 Opusの2倍の速度でこれまでの5分の1のコストに。<br><br>また新しく、&quot;Artifacts&quot;という新機能が登場。Xで早速Artifacts機能のすごい事例が報告されています。<br>厳選して10個まとめました🧵👇</p>&mdash; ChatGPT研究所 (@ctgptlb) <a href="https://twitter.com/ctgptlb/status/1803822932831166712?ref_src=twsrc%5Etfw">June 20, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

https://chatgpt-lab.com/n/nb1b40d447056

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

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

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">Claude 3.5 Sonnetで作ったPower Appsの待機用画面。<br>最高だ🚀 <a href="https://t.co/6SgvgAnHZB">pic.twitter.com/6SgvgAnHZB</a></p>&mdash; 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) <a href="https://twitter.com/DemodoriGatsuo/status/1804165124581920780?ref_src=twsrc%5Etfw">June 21, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 単純なSVG作成を手伝ってもらう
まずは[Claude 3.5 Sonnet](https://www.anthropic.com/news/claude-3-5-sonnet)を開きます。

https://www.anthropic.com/news/claude-3-5-sonnet

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/b7d4a91e-65d9-b1db-cd6b-6691cd831841.png)

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

https://support.anthropic.com/en/articles/8241175-how-do-i-increase-my-usage-limits

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/aa551b25-8cad-f411-e4f3-11a73ac2d159.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/dde64eb9-e456-37a7-7b7e-38bb07c5ea96.png)

# Power AppsのためのSVGを描画する
下記のようなざっくりとしたプロンプトを渡してみます。

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

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

```plaintext:Answer
"data:image/svg+xml," & EncodeUrl(<SVGコード>)
```
> By Claude 3.5

Claude 3.5のとおり[EncodeUrl 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-encode-decode)はSVGの描画で活躍します。

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-encode-decode

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

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

## 単純な図形の並び

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Claude 3.5 Sonnetの機能、凄い・・・<br>Power AppsのSVGの作成から描画まで一瞬で丁寧にやってくれる<br><br>UI美しい <a href="https://t.co/lq8JFQYG05">pic.twitter.com/lq8JFQYG05</a></p>&mdash; 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) <a href="https://twitter.com/DemodoriGatsuo/status/1804085189544657183?ref_src=twsrc%5Etfw">June 21, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

```xml: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>
```

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

## 動く図形

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Claude 3.5 Sonnet凄すぎ・・・ <a href="https://t.co/Nw6TQYrFpJ">pic.twitter.com/Nw6TQYrFpJ</a></p>&mdash; 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) <a href="https://twitter.com/DemodoriGatsuo/status/1804087470021128515?ref_src=twsrc%5Etfw">June 21, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

```xml:動く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>
```

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

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

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

```xml:宇宙風
<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も書いてもらいましょう。
結果はコチラ！

```xml:シューティングゲーム
<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とコラボレーションしていきたいと思います！