feat: add ai generate image

.eslintrc-auto-import.json

@@ -31,13 +31,15 @@
  "executeSQL": true,
  "generalKeys": true,
  "getActivePinia": true,
+ "getAiIamge": true,
  "getAiMessage": true,
  "getContributorsApi": true,
  "getCurrentInstance": true,
  "getCurrentScope": true,
  "getKeySymbol": true,
  "getMemoryList": true,
  "getOpenAICreditApi": true,
+ "getOpenAIImage": true,
  "getOpenAIKey": true,
  "getOpenAIResultApi": true,
  "getOpenAIResultStreamApi": true,

src/api/openAi.ts

@@ -3,7 +3,7 @@ import {
  fetchEventSource,
  type EventSourceMessage
 } from '@microsoft/fetch-event-source'
-import type { MessageData } from '@/types'
+import type { MessageData, ImageData } from '@/types'
 
 /**
  * 获取 openai 对话消息
@@ -126,3 +126,23 @@ export const getOpenAICreditApi = async () => {
  }
  }
 }
+
+/**
+ * 根据提示创建图像
+ * @param messages 图像参数
+ */
+export const getOpenAIImage = async (imageData: ImageData) => {
+ if (!imageData) return
+
+ const apiKey = getOpenAIKey()
+ if (!apiKey) return
+
+ return await request('/v1/images/generations', {
+ method: 'POST',
+ headers: {
+ Authorization: `Bearer ${apiKey}`,
+ HostUrl: HOST_URL.OPENAI
+ },
+ body: Body.json(imageData)
+ })
+}

src/components/Input/index.vue

@@ -2,10 +2,10 @@
 import { appWindow } from '@tauri-apps/api/window'
 
 const recordStore = useSessionStore()
-const { isThinking } = storeToRefs(recordStore)
+const { isThinking, currentSession } = storeToRefs(recordStore)
 
 const roleStore = useRoleStore()
-const { currentRole, isEdit, textAreaValue, popoverVisible } =
+const { currentRole, isEdit, textAreaValue, imageValue, popoverVisible } =
  storeToRefs(roleStore)
 
 const textAreaElement = ref<HTMLTextAreaElement | null>(null)
@@ -25,11 +25,10 @@ const onKeydown = (event: KeyboardEvent) => {
 
  if (!value) return
 
- // if (popoverVisible) {
  popoverVisible.value = false
- // }
 
- getAiMessage(value)
+ if (currentSession.value?.type === 'text') getAiMessage(value)
+ else getAiIamge(value)
 
  textAreaElement.value?.blur()
  textAreaValue.value = ''
@@ -60,21 +59,32 @@ onMounted(() => {
 <template>
  <div class="app-input flex items-center gap-2">
  <RoleList />
-
- <a-textarea
- ref="textAreaElement"
- class="bordered bg-transparent!"
- :class="!textAreaValue && 'rounded-10'"
- :placeholder="isThinking ? 'AI 正在思考...' : '有什么问题尽管问我'"
- v-model="textAreaValue"
- :disabled="isThinking || isEdit"
- :auto-size="{
- minRows: 1,
- maxRows: 5
- }"
- clearable
- @keydown="onKeydown"
- ></a-textarea>
+ <div class="flex w-full flex-col">
+ <a-textarea
+ ref="textAreaElement"
+ class="bordered bg-transparent!"
+ :class="!textAreaValue && 'rounded-10'"
+ :placeholder="isThinking ? 'AI 正在思考...' : '有什么问题尽管问我'"
+ v-model="textAreaValue"
+ :disabled="isThinking || isEdit"
+ :auto-size="{
+ minRows: 1,
+ maxRows: 5
+ }"
+ clearable
+ @keydown="onKeydown"
+ ></a-textarea>
+ <div class="flex w-full" v-if="currentSession?.type === 'image'">
+ <a-select placeholder="选择生成的尺寸" v-model="imageValue.size">
+ <a-option>256x256</a-option>
+ <a-option>512x512</a-option>
+ <a-option>1024x1024</a-option>
+ </a-select>
+ <a-select placeholder="选择生成的数量" v-model="imageValue.number">
+ <a-option v-for="i in 10" :key="i">{{ i + '' }}</a-option>
+ </a-select>
+ </div>
+ </div>
  </div>
 </template>
 

src/sqls/index.ts

@@ -62,7 +62,7 @@ export const executeSQL = async (sql: string, hideError = false) => {
 export const initSQL = async () => {
  await executeSQL(
  `
- CREATE TABLE IF NOT EXISTS session (id TEXT, title TEXT, role_id INTEGER, update_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP);
+ CREATE TABLE IF NOT EXISTS session (id TEXT, title TEXT, role_id INTEGER, type TEXT, update_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP);
  CREATE TABLE IF NOT EXISTS session_data (id INTEGER PRIMARY KEY AUTOINCREMENT, session_id TEXT, message TEXT, is_ask INTEGER, is_memory INTEGER, message_type TEXT, time TIMESTAMP DEFAULT CURRENT_TIMESTAMP);
  CREATE TABLE IF NOT EXISTS role (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, description TEXT, is_default INTEGER DEFAULT false);
  CREATE TABLE IF NOT EXISTS credit (id INTEGER PRIMARY KEY AUTOINCREMENT, history_id INTEGER, token_cost INTEGER, api_key TEXT);
@@ -81,6 +81,11 @@ export const initSQL = async () => {
  `ALTER TABLE session ADD COLUMN update_time TIMESTAMP DEFAULT ${Date.now()};`,
  true
  )
+ // 2. 2023-03-27 在 session 表中添加 type 列，记录对话的类型
+ await executeSQL(
+ `ALTER TABLE session ADD COLUMN type TEXT DEFAULT 'text';`,
+ true
+ )
 }
 
 /**

src/stores/role.ts

@@ -13,6 +13,10 @@ export const useRoleStore = defineStore(
  const popoverVisible = ref(false)
  // 检索角色列表的输入框值
  const textAreaValue = ref('')
+ const imageValue = reactive({
+ number: '1',
+ size: '256x256'
+ })
  // 是否有角色正在编辑
  const isEdit = computed(() => roleList.value.some((item) => item.isEdit))
 
@@ -118,6 +122,7 @@ export const useRoleStore = defineStore(
  filterRoleList,
  popoverVisible,
  textAreaValue,
+ imageValue,
  isEdit,
  getRoleList,
  getFilterRoleList,

src/stores/session.ts

@@ -52,7 +52,8 @@ export const useSessionStore = defineStore(
  currentSession.value = {
  id: crypto.randomUUID(),
  title: '',
- role_id: defaultRole.id
+ role_id: defaultRole.id,
+ type: 'image'
  }
  }
 
@@ -75,19 +76,30 @@ export const useSessionStore = defineStore(
  await insertSQL('session', {
  id: currentSession.value.id,
  title: data.content,
- role_id: currentRole.id
+ role_id: currentRole.id,
+ type: currentSession.value.type
  })
  }
 
- const { isMemory } = useSettingsStore()
+ if (messageType === 'text') {
+ const { isMemory } = useSettingsStore()
 
- await insertSQL('session_data', {
- session_id: currentSession.value.id,
- is_ask: isAsk,
- is_memory: isMemory,
- message: data,
- message_type: messageType
- })
+ await insertSQL('session_data', {
+ session_id: currentSession.value.id,
+ is_ask: isAsk,
+ is_memory: isMemory,
+ message: data,
+ message_type: messageType
+ })
+ } else if (messageType === 'image') {
+ await insertSQL('session_data', {
+ session_id: currentSession.value.id,
+ is_ask: isAsk,
+ is_memory: false,
+ message: data,
+ message_type: messageType
+ })
+ }
 
  await getSessionData()
  }

src/types/sql.d.ts

@@ -6,6 +6,12 @@ export interface MessageData {
  role: Role
  content: string
 }
+
+export interface ImageData {
+ n: number
+ prompt: string
+ size: '256x256' | '512x512' | '1024x1024'
+}
 export interface RolePayload {
  id?: number
  name: string
@@ -33,6 +39,7 @@ export interface SessionPayload {
  role_id: number
  update_time?: string
  name?: string
+ type: 'text' | 'image'
  isEdit?: boolean
 }
 

src/utils/openai.ts

@@ -122,3 +122,71 @@ export const getAiMessage = async (value?: string) => {
  isThinking.value = false
  }
 }
+
+/**
+ * 获取 ai 作图
+ * @param value 消息内容
+ */
+export const getAiIamge = async (value?: string) => {
+ const { isThinking, sessionDataList } = storeToRefs(useSessionStore())
+ const { updateSessionData } = useSessionStore()
+
+ try {
+ // 获取图像的记忆模式 = 按照上一张图去修改生成
+ let imageData
+
+ if (!value) {
+ // 重复上一次提问
+ const { sessionDataList } = useSessionStore()
+
+ const lastQuestion = sessionDataList.filter((item) => item.is_ask).at(-1)
+ if (!lastQuestion) return
+
+ const deleteSql = `DELETE FROM session_data WHERE session_id = '${lastQuestion?.session_id}' AND id >= ${lastQuestion?.id};`
+ await executeSQL(deleteSql)
+
+ imageData = JSON.parse(lastQuestion?.message.content as any)
+ } else {
+ // 添加正常提问
+ const { imageValue } = useRoleStore()
+
+ imageData = {
+ n: parseInt(imageValue.number),
+ size: imageValue.size,
+ prompt: value
+ }
+ }
+
+ const { addSessionData } = useSessionStore()
+
+ isThinking.value = true
+
+ await addSessionData({
+ isAsk: true,
+ data: {
+ role: 'user',
+ content: imageData
+ }
+ })
+
+ await addSessionData({
+ isAsk: false,
+ messageType: 'image',
+ data: {
+ role: 'assistant',
+ content: ''
+ }
+ })
+
+ const res = await getOpenAIImage(imageData)
+ if (!res) return
+
+ sessionDataList.value.at(-1)!.message.content = res.data as string
+ } catch ({ message }: any) {
+ sessionDataList.value.at(-1)!.message.content = message as any
+
+ updateSessionData(sessionDataList.value.at(-1)!)
+ } finally {
+ isThinking.value = false
+ }
+}

src/utils/updater.ts

@@ -13,7 +13,7 @@ const marked = new MarkdownIt({
 })
 
 export const checkVersion = async () => {
- const updateInfo = await checkUpdate()
+ const updateInfo = await checkUpdate().catch(() => null)
 
  if (!updateInfo || !updateInfo.manifest) return