ArtRequest 请求

何时使用

• 向符合 OpenAI 标准的 LLM 发起请求。

代码演示

基础

该示例说明如何使用 ArtRequest 对符合 OpenAI 标准的 LLM 发起 fetch 请求 ，请拷贝代码且在 DEV 环境用实际的值替换 BASE_URL, PATH, MODEL, API_KEY 来使用

Request Log

Status：-

Update Times：0

<script setup lang="ts">
import type { ThoughtChainItemProps } from '@artmate/chat'
import { ArtRequest, ThoughtChain } from '@artmate/chat'
import { Discount, Loading } from '@element-plus/icons-vue'
import { ElButton, ElIcon, ElSpace } from 'element-plus'
import { computed, ref } from 'vue'
/**
 * 🔔 Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.
 */
const BASE_URL = 'https://api.example.com'
const PATH = '/chat'
const MODEL = 'gpt-3.5-turbo'
// const API_KEY = '';

const exampleRequest = ArtRequest({
  baseURL: BASE_URL + PATH,
  model: MODEL,

  /** 🔥🔥 Its dangerously! */
  // dangerouslyApiKey: API_KEY
})

const status = ref<ThoughtChainItemProps['status']>()
const lines = ref<Record<string, string>[]>([])

async function request() {
  status.value = 'pending'

  await exampleRequest.create(
    {
      messages: [{ role: 'user', content: 'hello, who are u?' }],
      stream: true,
    },
    {
      onSuccess: (messages) => {
        status.value = 'success'
        console.log('onSuccess', messages)
      },
      onError: (error) => {
        status.value = 'error'
        console.error('onError', error)
      },
      onUpdate: (msg) => {
        lines.value = [...lines.value, msg]
        console.log('onUpdate', msg)
      },
    },
  )
}

const description = computed(() => {
  if (status.value === 'error' && exampleRequest.baseURL === BASE_URL + PATH) {
    return 'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.'
  }
  return ''
})

const items = computed<ThoughtChainItemProps[]>(() => [
  {
    title: 'Request Log',
    status: status.value,
    description: description.value,
  },
])
</script>

<template>
  <div class="demo">
    <ElButton type="primary" :disabled="status === 'pending'" @click="request">
      Agent Request
    </ElButton>
    <ThoughtChain :items="items">
      <template #icon="{ info }">
        <ElIcon size="20" :color="info.status ? 'white' : 'block'">
          <Loading v-if="info.status === 'pending'" />
          <Discount v-else />
        </ElIcon>
      </template>
      <template #content="{ info }">
        <ElSpace direction="vertical" alignment="flex-start">
          <div>Status：{{ info.status || '-' }}</div>
          <div>Update Times：{{ lines.length }}</div>
        </ElSpace>
      </template>
    </ThoughtChain>
  </div>
</template>

<style lang="scss" scoped>
.demo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow-x: auto;
}
</style>

查看源代码

自定义转换器

为 ArtRequest 配置自定义的 transformStream

Mock Custom Protocol - Log

<script setup lang="ts">
import type { ThoughtChainItemProps } from '@artmate/chat'
import { ArtRequest, ThoughtChain } from '@artmate/chat'
import { Discount, Loading } from '@element-plus/icons-vue'
import { ElButton, ElIcon } from 'element-plus'
import { computed, ref } from 'vue'

const BASE_URL = 'https://api.example.host'
const PATH = '/chat'
const MODEL = 'gpt-4o'

const ND_JSON_SEPARATOR = '\n'

async function mockFetch() {
  const ndJsonData = `{data:{"id":"0","choices":[{"index":0,"delta":{"content":"Hello","role":"assistant"}}],"created":1733129200,"model":"gpt-4o"}}
{data:{"id":"1","choices":[{"index":1,"delta":{"content":"world!","role":"assistant"}}],"created":1733129300,"model":"gpt-4o"}}
{data:{"id":"2","choices":[{"index":2,"delta":{"content":"I","role":"assistant"}}],"created":1733129400,"model":"gpt-4o"}}
{data:{"id":"3","choices":[{"index":3,"delta":{"content":"am","role":"assistant"}}],"created":1733129500,"model":"gpt-4o"}}
{data:{"id":"4","choices":[{"index":4,"delta":{"content":"Ant Design X!","role":"assistant"}}],"created":1733129600,"model":"gpt-4o"}}`

  const chunks = ndJsonData.split(ND_JSON_SEPARATOR)

  const response = new Response(
    new ReadableStream({
      async start(controller) {
        for (const chunk of chunks) {
          await new Promise(resolve => setTimeout(resolve, 100))
          controller.enqueue(new TextEncoder().encode(chunk))
        }
        controller.close()
      },
    }),
    {
      headers: {
        'Content-Type': 'application/x-ndjson',
      },
    },
  )

  return response
}

const exampleRequest = ArtRequest({
  baseURL: BASE_URL + PATH,
  model: MODEL,
  fetch: mockFetch,
})

const status = ref<ThoughtChainItemProps['status']>()
const lines = ref<string[]>([])

async function request() {
  status.value = 'pending'

  await exampleRequest.create(
    {
      messages: [{ role: 'user', content: 'hello, who are u?' }],
      stream: true,
    },
    {
      onSuccess: (messages) => {
        status.value = 'success'
        console.log('onSuccess', messages)
      },
      onError: (error) => {
        status.value = 'error'
        console.error('onError', error)
      },
      onUpdate: (msg) => {
        lines.value = [...lines.value, msg]
        console.log('onUpdate', msg)
      },
    },
    new TransformStream<string, string>({
      transform(chunk, controller) {
        controller.enqueue(chunk)
      },
    }),
  )
}
const items = computed<ThoughtChainItemProps[]>(() => [
  {
    title: 'Mock Custom Protocol - Log',
    status: status.value,
    content: lines.value,
  },
])
</script>

<template>
  <div class="demo">
    <ElButton type="primary" :disabled="status === 'pending'" @click="request">
      Agent Request
    </ElButton>
    <ThoughtChain :items="items">
      <template #icon="{ info }">
        <ElIcon size="20" :color="info.status ? 'white' : 'block'">
          <Loading v-if="info.status === 'pending'" />
          <Discount v-else />
        </ElIcon>
      </template>
      <template #content="{ info }">
        <pre v-if="info.content">
          <code>{{ info.content.join(ND_JSON_SEPARATOR) }}</code>
        </pre>
      </template>
    </ThoughtChain>
  </div>
</template>

<style lang="scss" scoped>
pre {
  width: auto;
  margin: 0;
  overflow: auto;

  code {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
  }
}

.demo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow-x: auto;
}
</style>

查看源代码

API

ArtRequestOptions

属性	描述	类型	默认值	版本
baseURL	API 请求的基础 URL	string	-	-
model	模型名称，例如 'gpt-3.5-turbo'	string	-	-
dangerouslyApiKey	注意: 🔥 dangerouslyApiKey 存在安全风险，对此有详细的说明。	string	-	-
fetch	可选的自定义 fetch 函数，用于发起请求	fetch	-	-

ArtRequestFunction

type ArtRequestFunction<Input = Record<PropertyKey, any>, Output = Record<string, string>> = (
  params: ArtRequestParams & Input,
  callbacks: ArtRequestCallbacks<Output>,
  transformStream?: ArtStreamOptions<Output>['transformStream']
) => Promise<void>

ArtRequestParams

属性	描述	类型	默认值	版本
model	生成响应时使用的模型。	string	-	-
messages	消息对象数组，每个对象包含角色和内容。	Record<PropertyKey, any>[]	-	-
stream	指示是否使用流式响应。	boolean	false	-

ArtRequestCallbacks

属性	描述	类型	默认值	版本
onSuccess	成功时的回调。	(messages: Output[]) => void	-	-
onError	错误处理的回调。	(error: Error) => void	-	-
onUpdate	消息更新的回调。	(message: Output) => void	-	-
transformStream	可选的转换函数，用于处理流数据	ArtStreamOptions<Output>['transformStream']	-	-