山东大学软件学院创新项目实训开发日志——收尾篇

山东大学软件学院创新项目实训开发日志——收尾篇

项目名称:ModuFusion Visionary:实现跨模态文本与视觉的相关推荐

-------项目目标:

  • 本项目旨在开发一款跨模态交互式应用,用户可以上传图片或视频,并使用文本、点、框等提示,精确分割出图片或视频中指定的物体,或者无提示地分割出所有物体。
  • 基于分割出的物体,用户可以选择生成感兴趣的其他图片或视频。
  • 内置推荐算法可以自动根据分割结果,推荐与之相关的信息。
收尾工作完成:项目主页开发
1. 视频轮播组件的实现

项目主页的顶部,计划实现一个视频轮播组件,要求视频自动播放、循环播放且不显示播放控件。为此,我使用了 el-carousel 组件,并对视频标签进行了配置:

<el-carousel indicator-position="outside" height="600px"><el-carousel-item v-for="video in videoSources" :key="video"><video :src="video" autoplay muted loop class="carousel-video"></video></el-carousel-item>
</el-carousel>

通过设置 autoplaymutedloop 属性,实现了视频的自动播放和循环播放,同时隐藏了播放控件,提升了用户体验。
在这里插入图片描述

2. 图像展示与悬浮效果

在顶部视频轮播图之下,计划实现图像展示功能,图像在悬浮时放大,并显示覆盖文字。以下是部分代码展示:

<div class="image-container" v-for="src in imageSources1" :key="src" @click="handleImageClick"><img :src="src" :alt="'Image ' + src" class="row-image"><div class="image-overlay"><p>Overlay Text for Image</p></div>
</div>

并在样式中添加了悬浮效果的定义:

.image-container:hover .row-image {transform: scale(1.1);
}.image-overlay {opacity: 0;transition: opacity 0.3s ease;
}.image-container:hover .image-overlay {opacity: 1;
}

通过这些设置,实现了图像在悬浮时的放大效果及覆盖文字的显示,增加了页面的互动性和视觉效果。
在这里插入图片描述

3. 菜单导航与内容切换

之后实现了一个菜单导航系统,在选择不同的菜单项时,显示不同的项目内容。具体是使用 el-menu 组件来实现这个功能,并通过 @select 事件进行内容切换:

<el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">精确分割</el-menu-item><el-menu-item index="2-1">智能生成</el-menu-item><el-menu-item index="2-2">相关推荐</el-menu-item><el-menu-item index="2-3">视频追踪</el-menu-item><el-menu-item index="3">风格变换</el-menu-item>
</el-menu>

在这里插入图片描述

4. 按钮交互效果

在设计按钮交互效果时,考虑到el-button的局限性太多,最终决定使用自定义的 div 代替 el-button,以便实现更灵活的样式和交互效果:

<div class="action-div primary-action" @click="primaryButtonClick">Primary Action</div>
<div class="action-div secondary-action" @click="secondaryButtonClick">Secondary Action</div>

并在样式中定义了按钮的外观和交互效果:

.action-div {width: 45%;height: 80px;line-height: 60px;text-align: center;padding: 10px;font-size: 20px;cursor: pointer;transition: background-color 0.3s, transform 0.3s;border-radius: 5px;
}.primary-action {background-color: #67c23a;color: white;
}.secondary-action {background-color: #ffffff;color: black;border: 1px solid;
}.action-div:hover {transform: scale(1.05);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
5. 图标配置

之后是一个简单的“Why Choose Us”模块,简单介绍我们项目的亮点和优势。为了增强页面的视觉效果,我为每个服务模块配置了不同的图标,使用了 Element UI 提供的图标组件:

<el-icon :size="50" style="margin-right: 10px;"><component :is="item.icon" />
</el-icon>

在这里插入图片描述

6.其他方面

其他方面包括主页底部的信息板块、整个项目的Logo设计等方面,这里不再一一展示,仅贴上项目的logo展示一下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/30112.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ardupilot开发 --- RTSP视频流 篇

我年轻时很穷&#xff0c;努力了几年&#xff0c;终于不再年轻了 0. 一些概念参考文献 0. 一些概念 RTSP服务、RTSP推流、RTSP拉流&#xff0c;缺一不可&#xff0c;尤其是RTSP服务。RTSP服务器、RTSP客户端。推流和拉流都是由客户端发起&#xff0c;向服务器发起对应的请求。…

leetcode 动态规划(基础版)删除并获得点数

题目&#xff1a; 给你一个整数数组 &#xff0c;你可以对它进行一些操作。nums 每次操作中&#xff0c;选择任意一个 &#xff0c;删除它并获得 的点数。之后&#xff0c;你必须删除 所有 等于 和 的元素。nums[i]nums[i]nums[i] - 1nums[i] 1 开始你拥有 个点数。返…

【千帆AppBuilder】你有一封邮件待查收|未来的我,你好吗?欢迎体验AI应用《未来信使》

我在百度智能云千帆AppBuilder开发了一款AI原生应用&#xff0c;快来使用吧&#xff01;「未来信使」&#xff1a;https://appbuilder.baidu.com/s/Q1VPg 目录 背景人工智能未来的信 未来信使功能介绍Prompt组件 千帆社区主要功能AppBuilderModelBuilder详细信息 推荐文章 未来…

服务器返回的Json出现了$ref

这是因为返回的对象嵌入了另一个对象 , 但是实际后台业务中它们是不同的对象 . 这个时候可以关闭循环引用来解决这个问题. package cn.com.baidu;import com.alibaba.fastjson.serializer.SerializerFeature; import com.alibaba.fastjson.support.spring.FastJsonHttpMessageC…

LUA移植到STM32F4,移植REPL,通过RTT Viewer交互

概述 站内移植LUA多数是使用C函数调用LUA&#xff0c;并没有移植REPL交互端口 本文将REPL也移植进去&#xff0c;做了简单的适配 LUA源码使用标准C库函数&#xff0c;如fgets&#xff0c;fwrite等&#xff0c;在嵌入式环境中要使用fgets&#xff0c;fwrite等C库函数&#xff…

头歌资源库(13)背包问题

一、 问题描述 二、算法思想 这是一个背包问题&#xff0c;可以使用动态规划算法来解决。具体思路如下&#xff1a; 定义一个二维数组dp&#xff0c;dp[i][j]表示前i个物品在背包容量为j时能获取的最大价值。初始化dp数组的第一行和第一列为0&#xff0c;表示当只有一个物品或…

【吊打面试官系列-Mysql面试题】SQL 语言包括哪几部分?每部分都有哪些操作关键字?

大家好&#xff0c;我是锋哥。今天分享关于 【SQL 语言包括哪几部分&#xff1f;每部分都有哪些操作关键字&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; SQL 语言包括哪几部分&#xff1f;每部分都有哪些操作关键字&#xff1f; SQL 语言包括数据定义(DDL)、…

大屏适配方案汇总

1. 适配方案1&#xff1a;rem font-size 我们都知道&#xff0c;在 css 中 1rem 等于 html 根元素设定的 font-size 的 px 值&#xff0c;通过动态的修改html 根元素的 font-size 大小就能动态的改变 rem 的大小&#xff0c;从而实现适配。 原理 动态设置 HTML 根字体大小将…

Android开启HTTP服务

需求&#xff1a;通过手机给设备升级固件&#xff0c;设备有WIFI 方案&#xff1a;升级包放到APP可以访问的目录&#xff0c;手机开热点并启动一个HTTP服务&#xff0c;设备连接手机热点&#xff0c;另外&#xff0c;设备端开启一个 telnet 服务&#xff0c;手机通过 telnet 登…

制作一个苹果软件自动运行工具需要用到的源代码!

在数字化时代的浪潮中&#xff0c;自动化运行工具扮演着越来越重要的角色&#xff0c;这些工具可以极大地提高工作效率&#xff0c;减少人为操作的繁琐和错误。 在苹果软件生态系统中&#xff0c;制作一个自动运行工具同样具有广泛的应用前景&#xff0c;本文将围绕“制作一个…

模拟原神圣遗物系统-小森设计项目,需求分析

需求分析 我操控某个角色的圣遗物时发现&#xff0c;一开始玩啥也不懂慢慢了解&#xff0c;今天才想起要不做一个 &#xff0c;然后开始想需求 跟Ai聊技术 聊着聊着 发现圣遗物 这个东西有点意思 本来今天打算写一下数据库 的外键想起了一些高兴的事情&#xff08;美人鱼&#…

C# WinForm —— 36 布局控件 GroupBox 和 Panel

1. 简介 两个可以盛放其他控件的容器&#xff0c;可以用于把不同的控件分组&#xff0c;一般不会注册事件 GroupBox&#xff1a;为其他控件提供可识别的分组。可通过Text属性设置标题&#xff1b;有边框&#xff1b;没有滚动条&#xff0c;一般用于按功能分组 Panel&#xff…

[BFS广搜]迷阵

描述 小Z每年都会为程设课出一道大作业&#xff0c;荼毒学弟学妹&#xff0c;可谓罪大恶极不可饶恕。 终于有一天&#xff0c;神明也看不下去了&#xff0c;他唤醒上古四大神兽&#xff0c;决定围困小Z&#xff0c;威慑一番。 于是&#xff0c;在小Z下一次醒来时&#xff0c;他…

SpringBoot+Maven项目的配置构建

文章目录 1、application.properties2、pom.xml 1、application.properties 也可使用yml yaml #静态资源 spring.mvc.static-path-pattern/images/** #上传文件大小设置 spring.http.multipart.max-file-size10MB spring.http.multipart.max-request-size10MBspring.mvc.path…

什么是交错计算,有哪些场景会出现交错计算

交错计算指的是在编程技术中&#xff0c;多个进程或任务以交替或交织的方式执行&#xff0c;共享资源并轮流取得进展。这种做法对于提高系统效率特别有用&#xff0c;确保没有单一资源&#xff08;如CPU核心&#xff09;在有其他任务可以使用时保持空闲。 在计算领域&#xff…

Sui的Fastcrypto加密库刷新速度记录

Sui使用的加密库Fastcrypto打破了许多速度记录&#xff0c;Mysten Labs在基准测试和安全分析中的工作修复了许多安全漏洞&#xff0c;同时通过识别新的优化技巧为创新开辟了道路。 最近在伦敦帝国理工学院举行的国际性能工程会议&#xff08;ICPE&#xff09;基准测试研讨会上…

【LeetCode:394. 字符串解码 + 栈 | 递归】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

C# —— while循环语句

作用 让顺序执行的代码 可以停下来 循环执行某一代码块 // 条件分支语句: 让代码产生分支 进行执行 // 循环语句 : 让代码可以重复执行 语法 while循环 while (bool值) { 循环体(条件满足时执行的代码块) …

智慧路灯:照亮未来城市的智慧之光

智慧路灯&#xff0c;顾名思义&#xff0c;是在传统路灯基础上集成物联网、大数据、云计算、人工智能等现代信息技术的新型照明系统。它不仅提供节能高效的照明服务&#xff0c;更成为城市信息采集、传输、发布的载体&#xff0c;以及多种增值服务的平台。 核心功能与技术创新 …