招募活动投稿展示 | 用 Gemini 多模态能力打造文案生成应用，轻松应对出海场景

<script>const videoElement = ref()const videoStream = ref()

onMounted(() => {  // 停止之前的流  if (videoStream.value) {    videoStream.value.getTracks().forEach((track) => track.stop());  }  // 获取用户媒体设备  navigator.mediaDevices    .getUserMedia({ video: { facingMode: "environment" } })    .then((mediaStream) => {      // 将video元素的流设置成摄像机的视频流      videoStream.value = mediaStream;      videoElement.value.srcObject = mediaStream;      // 视频流加载完成后播放      videoElement.value.onloadedmetadata = () => {        videoElement.value.play();      };    })    .catch(function (err) {      console.log(err.name + ": " + err.message);    });})</script>

<template>  <div class="video-wrapper">    <video ref="videoElement" class="video" autoplay playsinline></video>  </div></template>

<script>//上述初始化视频的逻辑//......

const CAMERA_STATUS_ENUM = {  DEFAULT: 1,  LOADING: 2,  OUTPUT: 3,}const cameraStatus = ref(CAMERA_STATUS_ENUM.DEFAULT) // 记录相机状态const drawVideoToCanvas = () => {    // 用来将拍照时的图像绘制到canvas，下面会详细展开}

// 拍照点击事件const onShutterClick = () => {  cameraStatus.value = CAMERA_STATUS_ENUM.LOADING  const base64Image = drawVideoToCanvas()}</script>

<template>  <div class="video-wrapper">    <video ref="videoElement" autoplay playsinline></video>    <canvas v-show="cameraStatus !== CAMERA_STATUS_ENUM.DEFAULT" ref="canvasElement"></canvas>  </div>  <div @click="onShutterClick">拍照</div></template>

const drawVideoToCanvas = () => {  const canvas = canvasElement.value;  canvas.width = videoElement.value.clientWidth;  canvas.height = videoElement.value.clientHeight;

  // 绘制内容  const ctx = canvas.getContext("2d");  const videoRatio = videoElement.value.videoWidth / videoElement.value.videoHeight;  const canvasRatio = canvas.width / canvas.height;  let drawWidth, drawHeight, startX, startY;  if (videoRatio > canvasRatio) {    // 视频宽高比大于画布宽高比，绘制高度等等于视频高度，绘制宽度等于视频高度除以画布宽高比    drawHeight = videoElement.value.videoHeight;    drawWidth = videoElement.value.videoHeight * canvasRatio;    // 计算绘制起始点坐标    startX = (videoElement.value.vi7udeoWidth - drawWidth) / 2;    startY = 0;  } else {    // 视频宽高比小于等于画布宽高比，绘制宽度等于视频宽度，绘制高度等于视频宽度除以画布宽高比    drawWidth = videoElement.value.videoWidth;    drawHeight = videoElement.value.videoWidth / canvasRatio;    // 计算绘制起始点坐标    startX = 0;    startY = (videoElement.value.videoHeight - drawHeight) / 2;  }

  // 使用canvas的drawImage方法将视频绘制到画布上  ctx.drawImage(    videoElement.value,    startX,    startY,    drawWidth,    drawHeight,    0,    0,    canvas.width,    canvas.height  );

  // 从dataURL中移除数据URL的前缀部分，以获取纯Base64编码的图像数据  const dataURL = canvas.toDataURL("image/png");  let base64Image = dataURL.replace(    /^data:image\/(png|jpg);base64,/,    ""  );  return base64Image}

import axios from "axios";

export default defineEventHandler(async (event) => {    const body = await readBody(event)

    const API_KEY = "你申请的Gemini KEY"

    // 各类模式的提示词    const PROMPT = {        "1": { id: 1, name: "小红书风格", prompt: "你是一位小红书博主，专注于为用户推荐种草有价值的物品。根据提供的图片信息，使用小红书风格创作一篇种草文案，只需要输出纯文字即可，不需要Markdown格式：", },        "2": { id: 2, name: "好评大师", prompt: "你是一名大众点评专家，专注于从消费者反馈中提取有价值的信息并提供详细的优缺点分析。根据提供的图片信息，写一篇好评，只需要输出纯文字即可，不需要Markdown格式：", },        "3": { id: 3, name: "一句话文案", prompt: "根据图中的信息，用非常精炼的一句话进行描述，需要有诗意，有洞察力，下面是图片信息，只需要输出纯文字即可，不需要Markdown格式：", },    }

    if (!body?.id || !body?.image) {        return {message: "缺少必要参数"};    }

    try {        // 请求gemini API并进行处理        const res = await axios.post(`https://generativelanguage.googleapis.com/v1/models/gemini-1.5-flash:generateContent?key=${API_KEY}`, {            "contents": [                {                    "role": "user",                    "parts": [                        { "text": PROMPT[body.id].prompt },                        {                            "inlineData": {                                "mimeType": "image/png",                                "data": body.image                            }                        }                    ]                }            ]        })        const outputText = res.data.candidates[0].content.parts[0].text        return {            outputText,            message: "请求成功"        }    } catch (e) {        return {            error: e,            message: "请求失败"        }    }})

<script>//上述初始化视频和处理canvas的逻辑// ......const geminiText = ref("") // 大模型生成的文案内容

const onShutterClick = () => {  cameraStatus.value = CAMERA_STATUS_ENUM.LOADING  const base64Image = drawVideoToCanvas()  requestGemini(base64Image)}

const requestGemini = (base64Image) => {  // 请求Gemini API  $fetch(`/api/gemini`, {    method: "post",    body: {      id: styleList.value[styleSelectIndex.value].id.toString(),      image: base64Image,    },  }).then(res => res.json()).then(res => {    cameraStatus.value = CAMERA_STATUS_ENUM.OUTPUT    geminiText.value = res.outputText  })}

const onCloseClick = () => {  geminiText.value = ""  cameraStatus.value = CAMERA_STATUS_ENUM.DEFAULT}</script>

<template>  <div class="video-wrapper">    <video ref="videoElement" autoplay playsinline></video>    <canvas v-show="cameraStatus !== CAMERA_STATUS_ENUM.DEFAULT" ref="canvasElement"></canvas>    <div class="gemini-loading" v-if="cameraStatus === CAMERA_STATUS_ENUM.LOADING">让我想想……</div>    <div class="gemini-output" v-if="cameraStatus === CAMERA_STATUS_ENUM.OUTPUT">      <p class="gemini-text">{{ geminiText }}</p>      <div class="close-button" @click="onCloseClick">关闭</div>    </div>  </div>  <div @click="onShutterClick">拍照</div></template>

https://generativelanguage.googleapis.com/v1/models/gemini-1.5-flash:generateContent?alt=sse&key=${API_KEY}