懒-创造了创造！撸个页面让AI帮我们试效果吧。

周末试了本地chrome的内置AI的时候，有的一个想法，语音跟页面DOM元素的交互。

释放我的键鼠，让AI执行我需要的操作，获取信息，然后重新沉浸DOM，把当前网页变换成每一次的指令结果。

原来在AI里面试过，给它相应的描述，然后让他给我输出一个组件，或者输出一个JS方法，CSS效果等等，但最终我还需要复制到项目里面，在浏览器查看最终的效果。

BUT，我现在不想干这一步了。正好perplexity里面有送的5美元的API调用份额。那就撸了试试看。

最初的想法

然后先在perplexcity里面试想法，遇第一个小坑，输出内容有点多，我只需要单纯的html代码，不需要其它的信息，而且html代码也不需要html,head这部分。

然后修改了一下计划，加上固定的输出限制词

NICE。是我想要的结果，虽然生成代码结构有点烂，不要在意这个细节了。

撸页面

代码很简单，只是试验一下我变懒的想法

<script setup>
import {ref} from 'vue'

const promptText = ref('')

const htmlDom = ref('')

const getResult = async () =>{
  fetch('https://api.perplexity.ai/chat/completions', {
    method: 'POST',
    headers: {
      'accept': 'application/json',
      'authorization': '我的ai的调用key',
      'content-type': 'application/json'
    },
    body: JSON.stringify({
      "model": "llama-3-70b-instruct",
      "messages": [
        {
          "role": "system",
          "content": "Be precise and concise."
        },
        {
          "role": "user",
          "content": promptText.value+"。输出格式为可执行的web代码，只要输出div结构和css代码，不需要其它任何说明信息,可直接执行的html代码。"
        }
      ]
    })
  })
  .then(response => response.json())
  .then(data => {
    htmlDom.value = data.choices.map(item => item.message.content).join('')
  })
  .catch(error => {
    console.error('Error:', error);
  });
}


</script>

<template>
  <div class="prompt-box">
    <strong>秋野试试想法</strong>
    <textarea v-model="promptText"></textarea><button @click="getResult">执行</button>
  </div>
  <div id="box" v-html="htmlDom">
  </div>
</template>

<style scoped>
.prompt-box{
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: grid;
  width: 1200px;
  grid-template-columns: 1fr 500px 200px;
  strong{
    font-size: 48px;
    font-weight: bold;
    background: linear-gradient(89.32deg, #3f59e6 .59%, #E91E63 99.44%);
    background-clip:text;
    -webkit-text-fill-color:transparent;
    line-height: 200px;
    text-align: center;
  }
  textarea{
    height: 200px;
    background: white;
    font-size: 16px;
    border: 1px solid #ddd;
    color: #000;
  }
  button{
    background: hsla(240,50%, 50%, 1);
    font-size: 24px;
  }
}
</style>

开始测试

第一次提示词：生成一个左7右3的布局，左边的背景色是红色，右边的背景色是蓝色，高度都为30QpX。输出格式为可执行的web代码

看着好象还行。测试一点别的效果，让我撸一个渐变、光影啥的有点抗拒了，描述一个就不是那么难了。

第二次提示词：在页面中间生成一个半径为100px的红色的圆，从左上角45度打光，球面带着高光到阴影的渐变，背景上有球体的阴影。

那试一下动画吧，一开始没加无限循环，然后重新又加上了无限循环，发现两次的球的颜色不一样。

第三次提示词：在页面中间生成一个半径为100px的红色的圆，从左上角45度打光，球面带着高光到阴影的渐变，背景上有球体的阴影，增加上动画、球在中间缓慢变大到200pX，再缓慢变回原来大小，数类似呼吸的运动，无限循环。

结束

最后想要结束的时候，试试指定网站的内容，然后重新组织给我。

结果不出意外的出意外了，我重新加了用中文回复，它还是英文。

那就用魔法打败魔法，“翻译成中文回复”。哈哈哈