山东大学创新实训第十六周周报------旅游报告前后端实现

在刚开始设想的是使用类似网易云、QQ等APP的年度总结的形式实现一个简单的趵突泉的旅游报告，参考文章：

网易云音乐html代码报告,网易云音乐H5案例欣赏：你的2017年度听歌报告-CSDN博客

如何在微信小程序里使用Lottie动画库_小程序动画库-CSDN博客

学习了一下html代码，尝试将其转换为wx小程序的方式来表达，发现存在很多问题，并且工作量很大，遂放弃（不过后期有时间可以多学习学习）

鉴于我们这个小程序是基于大模型开展的，所以更加重要的是如何与大模型产生功能上的碰撞，于是我们决定保存用户在问答页面的问答记录，将其输入给我们的大模型，使之生成总结作为我们这次旅程的旅行记录总结。

后端接口如下：

@app.route('/get_summery', methods=['GET'])
def get_summery():
    # user_id = request.args.get('user_id')
    user_folder = os.path.join(user_FOLDER, "0001")
    if not os.path.exists(user_folder):
        return jsonify({"error": "User not found"}), 404

    photos = []
    # for file in os.listdir(user_folder):
    #     if file.endswith(('.png', '.jpg', '.jpeg')):
    #         photos.append(f"https://www.aiguider666.asia/uploads/{user_id}/{file}")
    request_data = {
        "temperature": float(request.form.get('temperature', 0.8)),
        "top_p": float(request.form.get('top_p', 0.4))
    }

    qa_file_path = os.path.join(user_folder, 'qa.json')
    if os.path.exists(qa_file_path):
        with open(qa_file_path, 'r', encoding='utf-8') as f:
            qa_data = json.load(f)
            print('load successfully!')
            # 提取问题和回答并存储到一个字符串内
            qa_string = "\n\n".join([f"Question: {item['question']}\nAnswer: {item['answer']}" for item in qa_data])
            input_text = "下面这些文字是我的问答记录，请你为我写一段总结：" + qa_string
            answer = generate_text_with_image(input_text, None, [], request_data, True)
            answer = "趵突泉以其常年保持在18摄氏度左右的清澈泉水给大众留下了深刻的印象，水温适宜，使人感到四季如春。" + answer

    else:
        answer = "趵突泉以其常年保持在18摄氏度左右的清澈泉水给大众留下了深刻的印象，水温适宜，使人感到四季如春。" \
                 "在泉水旁，可聆听到“趵突”声，那是泉水从地下涌出时发出的独特声音，仿佛在向我们讲述着它悠久的历史和传奇。趵突泉的历史可以追溯到北魏时期，已有1500多年的历史，这让我们不禁感慨其历经沧桑却依然涌动不息的生命力。"

    return jsonify({'result': answer})

而小程序前端则是将后端响应的数据返回并展示：

在这里我是用wx的animation组件进行了一个简单地动画操作：

Page({
  data: {
    textAnimation: {},
    imageAnimation1: {},
    imageAnimation2: {},
    summary: ''
  },

  onLoad: function() {
    this.createAnimations();
    this.getSummary();
  },

  createAnimations: function() {
    this.textAnimation = wx.createAnimation({
      duration: 4000,
      timingFunction: 'ease'
    });

    this.imageAnimation1 = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    });

    this.imageAnimation2 = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    });
  },
  getSummary() {
    wx.request({
      url: 'https://xxxxx/get_summery', //你的url
      method: 'GET',
      success: (res) => {
        if (res.statusCode === 200) {
          this.setData({
            summary: res.data.result,
          });
          this.animateText();
        } else {
          console.error('Error:', res);
        }
      },
      fail: (err) => {
        console.error('Request failed', err);
      },
    });
  },
  animateText() {
    this.textAnimation.opacity(1).step();  // 出现动画
    this.textAnimation.opacity(1).step({ duration: 4000 });  // 停留 2 秒
    this.textAnimation.opacity(0).step();  // 消失动画

    this.setData({
      animationData: this.textAnimation.export()
    });
  },

  startAnimation: function() {
    // Text animation
    this.textAnimation.opacity(1).translateY(-50).step();
    this.setData({
      textAnimation: this.textAnimation.export()
    });

    // Image animations
    this.imageAnimation1.opacity(1).scale(1.5).step();
    this.setData({
      imageAnimation1: this.imageAnimation1.export()
    });

    this.imageAnimation2.opacity(1).rotate(360).step();
    this.setData({
      imageAnimation2: this.imageAnimation2.export()
    });

    // Reset animations
    setTimeout(() => {
      this.textAnimation.opacity(0).translateY(50).step();
      this.setData({
        textAnimation: this.textAnimation.export()
      });

      this.imageAnimation1.opacity(0).scale(1).step();
      this.setData({
        imageAnimation1: this.imageAnimation1.export()
      });

      this.imageAnimation2.opacity(0).rotate(0).step();
      this.setData({
        imageAnimation2: this.imageAnimation2.export()
      });
    }, 2000);
  }
});



// import animationData from '动态背景.json';

// Page({
//   data: {
//     animationData: null,
//   },
//   onLoad() {
//     this.setData({
//       animationData,
//     });
//   },
// });

实现结果显示如下：