for blog

index.vue

<script setup>
const promptText = ref('')
const generateText = ref('')
const inProgress = ref(false)

const askChatGPT = async () => {
  inProgress.value = true
  generateText.value = 'loading...'
  try {
    const prompt = `${promptText.value}`
    const { data } = await useFetch('/api/chatgpt', {
      method: 'POST',
      body: { prompt }
    })
    const content = data.value.choices[0].message.content
    generateText.value = content
  } catch (e) {
    console.error(e)
    generateText.value = 'error'
  } finally {
    inProgress.value = false
  }
}
</script>

<template>
  <!-- prompt -->
  <div class="m-4">
    <label for="message" class="">プロンプト</label>
    <textarea v-model="promptText" :disabled="inProgress" rows="8"
      class="mt-2 p-2 w-full text-sm rounded-lg border border-gray-300" placeholder="XXX について教えてください"></textarea>
  </div>

  <!-- ChatGPT -->
  <div class="m-4">
    <button type="button" @click="askChatGPT" :disabled="inProgress || !promptText"
      class="rounded text-white px-2 py-2 bg-blue-600 disabled:border-gray-300 disabled:bg-gray-300 disabled:text-gray-100">
      ChatGPT に聞く
    </button>
  </div>
  <div class="m-4"> {{ generateText }}</div>
</template>