2023-10-30

其他

记一次语言模型的prompt enginner

事情是这样子的，最近在写Vue3相关的代码，就想着能不能让GPT辅助我写代码，于是，我就先写了一个中文的prompt

Prompt1: 使用vue3写一个用户登录的页面

分割线内部是GPT的回答：

使用 Vue 3 来创建一个用户登录页面需要涉及到多个方面，比如 Vue 组件、数据绑定、事件处理等。下面我会给出一个简单的例子来展示如何实现这个功能。

首先，你需要确保你已经安装了 Vue CLI，如果没有，请参照 Vue 官方文档进行安装。

创建一个新的 Vue 项目:

vue create login-project

选择默认设置或按需配置，然后进入项目目录：

cd login-project

创建登录组件 (Login.vue):
在 src/components 目录下创建一个新的文件，命名为 Login.vue。

<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="handleLogin">
      <div>
        <label for="username">Username:</label>
        <input v-model="username" id="username" type="text" required />
      </div>
      <div>
        <label for="password">Password:</label>
        <input v-model="password" id="password" type="password" required />
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      if (this.username && this.password) {
        // 这里可以发送请求到服务器进行验证
        console.log("Username:", this.username);
        console.log("Password:", this.password);
      }
    }
  }
};
</script>

<style scoped>
/* 可以添加一些简单的样式 */
</style>

在主组件中使用登录组件:
打开 src/App.vue 并引入刚刚创建的登录组件。

<template>
  <div id="app">
    <Login />
  </div>
</template>

<script>
import Login from './components/Login.vue';

export default {
  components: {
    Login
  }
};
</script>

运行项目:
在命令行中输入以下命令运行项目：

npm run serve

现在你应该可以在浏览器中看到登录页面，并尝试输入用户名和密码。

请注意，这只是一个基础的登录页面实现，实际应用中，你可能还需要添加错误处理、表单验证、与后端服务器的交互等功能。

这个回答最大的问题是它的script部分与我预期不同，我希望是如下的风格形式，

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

因此，我就问GPT上述代码是什么风格。

GPT的的回答如下：

你给出的代码使用的是 Vue 3 的 Composition API 与 <script setup> 的组合。这是 Vue 3 引入的一种更加简洁、声明式的方式来使用 Composition API。

来简单解释一下这段代码：

<script setup>: 这是一个特殊的 <script> 标签，表示你将在其中使用 Composition API 的 setup() 函数特性。通过 <script setup>，你可以直接在组件顶级范围中声明响应性引用、计算属性、函数等，而不需要显式定义 setup() 函数。
import { ref } from 'vue': 这从 Vue 导入了 ref 函数，它用于创建一个响应性引用。
const count = ref(0): 这创建了一个响应性引用 count，并初始化其值为 0。使用 Composition API，你通常会使用 ref 或 reactive 来创建响应性数据。
<template>: 这部分定义了组件的模板。当按钮被点击时，count 的值会增加，点击事件是通过 @click="count++" 实现的。同时，按钮上显示的文字也会随着 count 的变化而实时更新。
<style scoped>: 这里定义了组件的样式，并使用了 scoped 属性，这意味着这些样式只会应用于当前组件，不会影响到其他组件。

总的来说，你展示的代码风格是 Vue 3 的 Composition API 配合 <script setup> 语法糖使用的风格。这种风格为 Vue 组件提供了更加简洁和灵活的方式来组织和管理响应性逻辑。

于是我改进了我的prompt，

Prompt2: 请使用Vue 3 的 Composition API 与 <script setup> 的组合，编写用户登录的组件

GPT的回答如下

当然可以。以下是使用 Vue 3 的 Composition API 和 <script setup> 来创建用户登录组件的示例代码：

<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="handleLogin">
      <div>
        <label for="username">Username:</label>
        <input v-model="username" id="username" type="text" required />
      </div>
      <div>
        <label for="password">Password:</label>
        <input v-model="password" id="password" type="password" required />
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

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

const username = ref('');
const password = ref('');

const handleLogin = () => {
  if (username.value && password.value) {
    // 这里可以发送请求到服务器进行验证
    console.log("Username:", username.value);
    console.log("Password:", password.value);
  }
};
</script>

<style scoped>
/* 你可以按需添加一些简单的样式 */
</style>

这里有几点需要注意：

使用了 <script setup>，所以我们可以直接在组件的顶层范围声明变量、函数等。
当使用 ref 在模板中绑定时，不需要 .value。但在 JavaScript 代码中引用 ref 值时需要使用 .value。
在 handleLogin 函数中，使用了 .value 来访问 username 和 password 的值。

此示例为基础版本，真实的登录流程应包含错误处理、表单验证、与服务器的交互等。

但是问题来了，我希望的顺序是 script, template, style，因此我又改进了我的Prompt

Promp3: 请使用Vue 3 的 Composition API 与 <script setup> 的组合，编写用户登录的组件, 请按照script, template, style的顺序

如下是GPT的回答，还没等他回答结束，我就发现不对劲了，它的顺序不对啊！

经过一波修改，我得到了如下的Prompt，并且表现还不错，5次中有四次按照我的要求来，但是依旧有一次不按照我的要求来。

Create a Vue 3 Single File Component (SFC) for "user login". only code, no explain, Structure it as follows:


<script setup lang="ts">
...
</script>

<template>
...
</template>

<style lang="sass">
...
</style>

我很难受，就去群里去吐槽，然后群里的朋友给了提高输出质量的3个技巧

1：定义角色，比如指定它是高级前端开发人员；
2：明确你的要求，越详细越好，可以正向描述，也可以反向要求，比如让他不要输出什么；
3：提供1-2两个示例输出。

按照这个技巧，我写了新的Prompt，如下

Create a Vue 3 Single File Component (SFC) for "user login". 

The first section  is  <script setup lang="ts"> </script>,  followed by the  <template> </template> section , and finally, the  <style lang="sass"> </style> section.  for example

```vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>
\```

新的Prompt，我先说明我要求的顺序，然后给了一个案例，在4.0中测试良好，几乎没出错。但是在3.5中，就没对过。

感想：我终于明白了什么叫做“语言模型，每次都是输出他认为概率最大的一个”。因为template的顺序是vue2时代的主流，显然互联网上占据主导的代码都是template的风格，因此GPT3.5的偏见太深了，几乎不可能被纠正。

当然，如果使用的是API，还是有可能纠正的，

import os
import openai
openai.api_key = "API KEY"

completion = openai.ChatCompletion.create(
  model="gpt-3.5-turbo",
  messages=[
    {"role": "system", "content": """You are a professional front-end developer, please help uesrto create a Vue 3 Single File Component (SFC) Component 
The first section  is  <script setup lang="ts"> </script>,  followed by the  <template> </template> section , and finally, the  <style lang="sass"> </style> section.
"""},
    {"role": "user", "content": "help me create counter component!"},
    {"role": "assistant", "content":"""```vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>
```"""},
    {"role": "user", "content": "help me write a user login component"},
    {"role": "assistant", "content": "```vue\n<template>\n  <div class=\"login-container\">\n ```"},
    {"role": "user", "content": "you are in wrong order"}
  ]
)

print(completion.choices[0].message["content"])

如下是GPT的输出内容，他会直接开始道歉，然后按照正确的顺序给你来。

Apologies for the confusion. Here’s the correct order for creating a user login component:

<script setup lang="ts">
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const loggedIn = ref(false)

const login = () => {
  // Add your login logic here
  if (username.value === 'admin' && password.value === 'password') {
    loggedIn.value = true
  } else {
    loggedIn.value = false
    // Show error message or perform any other login failed action
    console.log('Login failed')
  }
}

const logout = () => {
  // Add your logout logic here
  loggedIn.value = false
  username.value = ''
  password.value = ''
}
</script>

<template>
  <div class="login-container">
    <h2>Login</h2>

    <form @submit.prevent="login">
      <label for="username">Username</label>
      <input v-model="username" type="text" id="username" required>

      <label for="password">Password</label>
      <input v-model="password" type="password" id="password" required>

      <button type="submit">Login</button>
    </form>

    <div v-if="loggedIn">
      <h3>Welcome, {{ username }}</h3>
      <button @click="logout">Logout</button>
    </div>
  </div>
</template>

<style lang="sass" scoped>
/* Add your custom styles here */

.login-container {
  max-width: 400px;
  margin: 0 auto;
}

form {
  display: grid;
  gap: 1rem;
}

label {
  font-weight: bold;
}

button {
  background-color: #007bff;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
}

</style>

目前OpenAI的API提供了 Few-shot prompting的案例，最终我的prompt如下：

def write_vue3_component(user_request, model=MODEL, temperature=0.0):
    # The business jargon translation example, but with example names for the example messages
    response = openai.ChatCompletion.create(
        model=MODEL,
        messages=[
            {"role": "system", "content": """You are a professional front-end developer, please help uesrto create a Vue 3 Single File Component (SFC) Component 
    The first section  is  <script setup lang="ts"> </script>,  followed by the  <template> </template> section , and finally, the  <style lang="sass"> </style> section."""},
            {"role": "system", "name":"example_user", "content": "write a counter component!"},
            {"role": "system", "name": "example_assistant", "content": """```vue
    <script setup>
    import { ref } from 'vue'
    const count = ref(0)
    </script>
    <template>
    <button @click="count++">Count is: {{ count }}</button>
    </template>
    <style scoped>
    button {
    font-weight: bold;
    }
    </style>
    ```"""},
            {"role": "system", "name":"example_user", "content": "write a simple example"},
            {"role": "system", "name": "example_assistant", "content": """```vue
    <script setup lang="ts">
    import { ref } from 'vue'
    const message = ref('Hello, Vue 3!')

    const changeMessage = () => {
    message.value = 'Message has been changed!'
    }
    </script>

    <template>
    <div class="app">
        <h1>{{ message }}</h1>
        <button @click="changeMessage">Change Message</button>
    </div>
    </template>

    <style lang="sass" scoped>
    .app
    font-family: 'Arial', sans-serif
    text-align: center

    h1
    color: #2c3e50

    button
    margin-top: 20px
    padding: 10px 20px
    font-size: 16px
    color: #fff
    background-color: #3498db
    border: none
    cursor: pointer
    &:hover
        background-color: #2980b9
    </style>

    ```"""},
            {"role": "user", "content": user_request},
        ],
        temperature=temperature,
    )
    return response["choices"][0]["message"]["content"]

测试

ret = write_vue3_component("write a navbar component", model="gpt-3.5-turbo")
print(ret)

结果如下

<script setup lang="ts">
import { ref } from 'vue'

const isOpen = ref(false)

const toggleMenu = () => {
  isOpen.value = !isOpen.value
}
</script>

<template>
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        My Website
      </a>
      <button class="navbar-burger" :class="{ 'is-active': isOpen }" @click="toggleMenu">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div class="navbar-menu" :class="{ 'is-active': isOpen }">
      <div class="navbar-end">
        <a class="navbar-item" href="#">Home</a>
        <a class="navbar-item" href="#">About</a>
        <a class="navbar-item" href="#">Services</a>
        <a class="navbar-item" href="#">Contact</a>
      </div>
    </div>
  </nav>
</template>

<style lang="sass" scoped>
.navbar
  background-color: #f5f5f5
  padding: 10px

.navbar-brand
  display: flex
  align-items: center

.navbar-item
  padding: 10px
  color: #333
  text-decoration: none

.navbar-burger
  border: none
  background-color: transparent
  cursor: pointer
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  padding: 5px

.navbar-burger span
  width: 25px
  height: 3px
  background-color: #333
  margin: 2px

.navbar-menu
  display: none

.is-active
  display: block
</style>

效果如下：

效果还真不错哦

参考资料：

https://cookbook.openai.com/examples/how_to_format_inputs_to_chatgpt_models

# GPT prompt engineer

记一次语言模型的prompt enginner

喜欢这篇文章？打赏一下作者吧

评论

分类

标签云

链接

最新文章

标签

最新文章

标签

Your browser is out-of-date!