当前位置：首页 > article >正文

简单的前端原型：个性化广告文案生成

article 2025/3/4 16:55:00

一、技术实现思路

功能流程：
关键点：
- 用户画像数据通过 WebSocket 发送到 DeepSeek API
- 需要构造包含 age 和 interests 的请求体
- 处理 API 返回的 JSON 结构中的 ad_creative 字段

二、完整项目代码

1. 项目结构

src/
├── assets/
├── components/
│   ├── UserProfile.vue  # 用户信息收集组件
│   └── AdCard.vue       # 广告卡片组件
├── services/
│   └── deepseek.js     # DeepSeek API 封装
└── App.vue            # 主应用

2. `UserProfile.vue` 组件

<template>
  <div class="profile-form">
    <h3>填写您的信息</h3>
    
    <div class="form-group">
      <label for="age">年龄：</label>
      <input type="number" id="age" v-model="user.age" min="18" max="100" required>
    </div>

    <div class="form-group">
      <label for="interests">兴趣：</label>
      <textarea id="interests" v-model="user.interests" rows="3" placeholder="用逗号分隔您的兴趣"></textarea>
    </div>

    <button @click="submitProfile">生成广告</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useDeepSeekService } from '@/services/deepseek';

export default defineComponent({
  name: 'UserProfile',
  setup() {
    const user = ref({
      age: '',
      interests: ''
    });
    
    const deepseek = useDeepSeekService();
    
    function submitProfile() {
      if (!user.value.age || !user.value.interests) return;
      
      deepseek.generateAd(user.value).then(ad => {
        console.log('广告生成结果:', ad);
        // 触发全局事件或通过 Vuex 更新状态
        this.$emit('ad-generated', ad);
      });
    }

    return {
      user,
      submitProfile
    };
  }
});
</script>

<style scoped>
.profile-form {
  width: 300px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 15px;
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
}
</style>

3. `AdCard.vue` 组件

<template>
  <div class="ad-card" v-if="ad">
    <h4>{{ ad.title }}</h4>
    <p>{{ ad.description }}</p>
    <div class="tags">
      {{ ad.tags.join(', ') }}
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'AdCard',
  props: {
    ad: Object
  },
  setup() {}
});
</script>

<style scoped>
.ad-card {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 20px 0;
}

h4 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.tags {
  color: #7f8c8d;
  font-size: 0.9em;
}
</style>

4. `deepseek.js` 服务封装

import { Injectable } from '@vue/runtime-core';
import { w3cwebsocket as WSC } from 'websocket';

@Injectable()
export class DeepSeekService {
  private socket: WSC | null = null;
  private apiUrl = 'wss://api.deepseek.com/v1/chat'; // 实际API地址需替换

  connect() {
    this.socket = new WSC(this.apiUrl, {
      headers: {
        'Authorization': `Bearer ${process.env.VUE_APP_DEEPSEEK_API_KEY}`,
        'Content-Type': 'application/json'
      }
    });

    this.socket.onmessage = (event) => {
      this.handleResponse(JSON.parse(event.data));
    };
  }

  generateAd(userProfile) {
    return new Promise((resolve, reject) => {
      if (!this.socket || this.socket.readyState !== WSC.OPEN) {
        reject(new Error('WebSocket 连接未建立'));
        return;
      }

      const requestBody = {
        type: 'generate_ad',
        parameters: {
          user_profile: userProfile
        }
      };

      this.socket.send(JSON.stringify(requestBody));
    });
  }

  private handleResponse(response) {
    if (response.type === 'ad_generated') {
      console.log('收到广告生成结果:', response.data);
      this.$emit('ad-response', response.data);
    }
  }
}

5. 主应用 `App.vue`

<template>
  <div id="app">
    <UserProfile @ad-generated="showAd" />
    <AdCard :ad="currentAd" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import UserProfile from './components/UserProfile.vue';
import AdCard from './components/AdCard.vue';
import { DeepSeekService } from './services/deepseek';

export default defineComponent({
  name: 'App',
  components: {
    UserProfile,
    AdCard
  },
  setup() {
    const currentAd = ref(null);
    const deepseekService = new DeepSeekService();
    
    deepseekService.connect();
    deepseekService.$on('ad-response', (adData) => {
      currentAd.value = adData;
    });

    return {
      currentAd
    };
  }
});
</script>

三、配置说明

环境变量：

VUE_APP_DEEPSEEK_API_KEY=your_api_key_here

API 请求示例：

{
  "type": "generate_ad",
  "parameters": {
    "user_profile": {
      "age": 28,
      "interests": ["科技", "户外运动"]
    }
  }
}

响应格式：

{
  "type": "ad_generated",
  "data": {
    "title": "2025 科技新品发布会邀请函",
    "description": "探索下一代智能穿戴设备，限时优惠！",
    "tags": ["科技新品", "智能穿戴", "限时优惠"]
  }
}