#综合设计 ——多源异构数据采集与融合应用综合实践 码云地址

这个项目属于哪个课程<班级的链接>
组名、项目简介 组名：黑马楼：直面爬虫 项目需求：实现宠物具体种类的识别 项目目标：根据用户上传的文本和图片识别具体的宠物种类 项目开展技术路线：html,css,js,flask
团队成员学号 102202113许煊宇，102202103王文豪，102202148路治，102202129林伟宏，102102151黄靖，172209028伊晓，102202102王子聪，102202116李迦勒
这个项目的目标 根据用户上传的文本和图像，识别图像内容和文本信息，确定具体的宠物种类（例如：贵宾犬，比熊犬等）
其他参考文献 如何使用Python和大模型进行数据分析和文本生成 Python 调用常见大模型 API 全解析
#项目介绍  
名称：福宠  
背景：宠物在人们的生活中扮演着越来越重要的角色，对于宠物的准确识别和分类有助于宠物饲养者更好地了解宠物的品种等信息，同时也有利于宠物相关产业的精细化管理。  
意义：传统的宠物识别方法主要依赖人工观察和经验判断，效率较低且准确性难以保证。随着大模型技术在图像识别和自然语言处理领域的快速发展，利用计算机视觉和自然语言处理技术实现宠物信息的自动识别和分类成为可能。本项目旨在设计并实现一个综合的宠物信息识别与分类系统，通过整合图像分类和文本分析技术，提高宠物信息识别的准确性和效率。  
功能需求：  
1.用户上传图片和文本：用户能够上传宠物的照片，并填写相关描述文本（生活习惯，性格特征等）。  
2.图像处理与分析：通过调用星火认知大模型（图片理解）识别宠物种类（如狗、猫等）。  
3.文本分析与匹配：通过调用星火认知大模型（spark4.0 ultra）分析文本描述，以补充图像分类的结果。  
4.比对和分类：将图像和文本信息与本地数据库中的宠物信息进行比对，得出最终的宠物分类。  
5.展示结果：将识别的宠物类型呈现给用户。  
6.反馈机制：用户可以对分类结果提供反馈，帮助优化系统。  

个人分工

1 前端界面搭建与优化

<!DOCTYPE html>
<html lang="zh">
​
<head>
    <meta charset="UTF-8">
    <title>Upload Page</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            /* 设置背景图相关属性 */
            background-image: url('../static/background-a.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
        }
​
        /* 在页面最上方添加图片的样式设置，这里设置图片宽为200px，高为100px，可根据实际需求调整样式 */
        img.top-image {
            width: 1000px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 1000;
            z-index: 1; /* 确保在其他内容之上显示，可根据实际布局情况调整层级 */
        }
​
        h1 {
            position: absolute;
            top: 100px; /* 适当下移，避开上方添加的图片，可根据图片高度等情况调整数值 */
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            color: #333;
        }
​
        form {
            /* 去除透明度和半透明背景设置，改为白色背景 */
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 50%;
            height: 50%;
        }
​
        input[type="text"] {
            margin-bottom: 10px;
            width: 80%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            text-align: center;
        }
​
        /* 模拟上传按钮及相关文本的整体样式设置 */
        #upload-container {
            position: relative;
            display: inline-block;
            margin-bottom: 10px;
            width: 80%;
            max-width: 300px;
            cursor: pointer;
        }
​
        /* 隐藏的文件输入框样式，覆盖在模拟上传按钮及相关区域上 */
        #image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            display: none;
        }
​
        /* 模拟上传按钮的图片样式设置 */
        #upload-img {
            width: 100%;
            max-width: 300px; /* 可根据实际需求调整图片宽度 */
            max-height: 300px; /* 可根据实际需求调整图片高度 */
            border: none;
            border-radius: 0;
        }
​
        /* 用于显示提示文字的样式 */
        #upload-text {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            width: 100%;
            color: #333;
        }
​
        input[type="submit"] {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            position: relative;
            width: 300px;
            height: 60px;
            top: 10%;
            font-size: 30px;
            text-align: center;
        }
​
        /* 图片预览区域样式，初始隐藏 */
        #preview {
            position: relative;
            top: 50px;
            width: 100%;
            height: 100%;
            display: none;
            object-fit: contain; /* 让图片自适应铺满预览区域 */
            border-radius: 3px; /* 可根据需要添加圆角样式 */
        }
​
    </style>
</head>
​
<body>
    <!-- 在页面最上方添加图片元素，这里的src路径需替换为实际有效的图片路径，可根据需求调整宽高样式等 -->
    <img class="top-image" src="../static/logo.png" alt="页面顶部图片">
​
    <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="text">福宠名称</label><br>
        <input type="text" id="text" name="text"><br>
​
        <!-- 模拟上传按钮及相关文本区域 -->
        <div id="upload-container">
            <p id="upload-text">将福宠放入精灵球</p>
            <!-- 隐藏的文件输入框及相关元素 -->
            <input type="file" id="image" name="image" style="display: none" onchange="updateTextAndPreview(this)">
            <img id="preview" alt="Preview" style="display: none;">
            <img id="upload-img" src="../static/upload.png" alt="将福宠放入精灵球">
        </div>
​
        <br><br>
        <input class="submit" type="submit" value="捕捉福宠">
    </form>
​
    <script>
        const uploadContainer = document.getElementById('upload-container');
        const fileInput = document.getElementById('image');
        const uploadText = document.getElementById('upload-text');
        const previewImageElement = document.getElementById('preview');
        const uploadImg = document.getElementById('upload-img');
​
        // 当点击模拟上传按钮及相关区域时，触发隐藏文件输入框的点击事件
        uploadContainer.addEventListener('click', function () {
            fileInput.click();
        });
​
        function updateTextAndPreview(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
​
                reader.onload = function (e) {
                    previewImageElement.src = e.target.result;
                    previewImageElement.style.display = 'block';
                    uploadText.textContent = '精灵球内的福宠';
                    uploadImg.style.display = 'none';
                }
​
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</body>
​
</html>
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Result Page</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
            position: relative; /* 给body设置相对定位，作为绝对定位元素的参考 */
        }
​
        h1 {
            position: absolute;
            top: 0; /* 将标题定位到顶部 */
            left: 50%; /* 水平居中 */
            transform: translateX(-50%); /* 通过偏移来精确居中 */
            text-align: center;
            color: #333; /* 设置字体颜色，可根据喜好调整 */
        }
​
        form {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 50%;
            height: 50%;
        }
​
        p {
            margin-bottom: 10px;
            font-size: 30px;
        }
​
        img {
            max-width: 100%;
            max-height: 200px;
            margin-top: 10px;
        }
    </style>
</head>
​
<body>
    <h1>福宠</h1>
    <form>
        <p>Uploaded Text: </p>
        <p>{{ text }}</p>
        <p>精灵球内的福宠：</p>
        <img src="{{ image_path }}" alt="Uploaded Image">
        <p class="result">Result: {{ result }}</p>
    </form>
    
</body>
​
</html>

 

2框架搭建优化

  • 选择合适网站框架搭建并优化

3帮助模型评估优化

  • 设计并实现模型评估指标，例如准确率、召回率、F1 值等，对模型性能进行评估。

  • 根据评估结果，对模型进行优化，例如调整超参数、增加训练数据、采用数据增强技术等，提高模型的性能。

 

个人心得

  • 在这次团队项目中 我学会了许多 如前端页面的布局分配 js api接口 大模型的协调 并懂得了团队协作的重要性