xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-04 08:13:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

merge luma page code for v4.1.3

Browse Source
This commit is contained in:
RockYang
2024-09-09 18:07:10 +08:00
parent d4e00b960c
commit 5eb4ed157e
22 changed files with 1285 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/public/images/failed.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

216
web/src/assets/css/luma.styl
View File

@@ -49,8 +49,9 @@
.btn-swap {
margin-right 10px
.icon{
fill #fff
.icon-exchange{
color #ffffff
cursor pointer
}
}
}
@@ -135,12 +136,14 @@
}
.list-box {
padding 0 0 0 20px
padding 0
.item {
display flex
flex-flow row
align-items center
padding 5px 0
height 100px
padding 10px 15px
border-radius 10px
cursor pointer
margin-bottom 10px
@@ -210,45 +213,28 @@
flex-flow column
padding 0 20px
.title {
.prompt,.failed {
padding 6px 0
font-size 16px
font-weight 700
color rgb(250 247 245)
a {
color rgb(250 247 245)
&:hover {
text-decoration underline
}
}
.model {
color #E2E8F0
background-color #1C1616
border 1px solid #8f8f8f
font-weight normal
font-size 14px
padding 1px 3px
border-radius 5px
margin-left 10px
.iconfont {
font-size 12px
}
}
max-height 80px
line-height 28px
overflow hidden
text-overflow ellipsis
}
.tags {
font-size 14px
color #d1d1d1
padding 3px 0
.prompt {
color rgb(250 247 245)
}
.failed {
color #E4696B
}
}
.right {
display flex
justify-content right
min-width 200px;
font-size 14px
padding 0 15px
padding 0
.tools {
display flex
@@ -262,6 +248,7 @@
.text {
margin-right 10px
color #e1e1e1
}
}
@@ -279,45 +266,6 @@
}
}
.task {
height 100px
background-color #2A2525
display flex
align-items center
margin-bottom 10px
.left {
display flex
justify-content left
align-items center
padding 20px
width 320px
.title {
font-size 14px
color #e1e1e1
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
}
}
.center {
display flex
width 100%
justify-content center
.failed {
display flex
align-items center
color #E4696B
font-size 14px
}
}
.right {
display flex
width 100px
justify-content center
align-items center
}
}
}
.pagination {
@@ -326,67 +274,67 @@
justify-content center
}
.videos {
.item {
margin-bottom 20px
.video-box {
width 100%
aspect-ratio: 16/9;
border-radius 10px
video,img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius 10px
cursor pointer
}
}
.video-name {
color #e1e1e1
font-size 16px
white-space nowrap
overflow hidden
text-overflow ellipsis
padding 6px 0
text-align center
}
.opts {
display flex
justify-content center
.btn {
margin-right 10px
background-color hsla(0,0%,100%,.15)
border none
border-radius 20px
padding 3px 15px
cursor pointer
color #ffffff
font-size 14px
.iconfont {
font-size 11px
position relative
margin-right 5px
top -2px
}
.el-image {
width 14px
height 14px
margin-right 5px
}
&:hover {
background-color hsla(0,0%,100%,.2)
}
}
}
}
}
//.videos {
// .item {
// margin-bottom 20px
//
// .video-box {
// width 100%
// aspect-ratio: 16/9;
// border-radius 10px
// video,img {
// width: 100%;
// height: 100%;
// object-fit: cover;
// border-radius 10px
// cursor pointer
// }
// }
//
//
// .video-name {
// color #e1e1e1
// font-size 16px
// white-space nowrap
// overflow hidden
// text-overflow ellipsis
// padding 6px 0
// text-align center
// }
//
// .opts {
// display flex
// justify-content center
// .btn {
// margin-right 10px
// background-color hsla(0,0%,100%,.15)
// border none
// border-radius 20px
// padding 3px 15px
// cursor pointer
// color #ffffff
// font-size 14px
//
// .iconfont {
// font-size 11px
// position relative
// margin-right 5px
// top -2px
// }
//
// .el-image {
// width 14px
// height 14px
// margin-right 5px
// }
//
// &:hover {
// background-color hsla(0,0%,100%,.2)
// }
// }
// }
// }
//}
}
.btn {

10
web/src/assets/iconfont/iconfont.css
View File

@@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4125778 */
src: url('iconfont.woff2?t=1725000514997') format('woff2'),
url('iconfont.woff?t=1725000514997') format('woff'),
url('iconfont.ttf?t=1725000514997') format('truetype');
src: url('iconfont.woff2?t=1725863856362') format('woff2'),
url('iconfont.woff?t=1725863856362') format('woff'),
url('iconfont.ttf?t=1725863856362') format('truetype');
}
.iconfont {
@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-exchange:before {
content: "\e6f5";
}
.icon-merge:before {
content: "\e901";
}

2
web/src/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
web/src/assets/iconfont/iconfont.json
View File

@@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "7573248",
"name": "exchange",
"font_class": "exchange",
"unicode": "e6f5",
"unicode_decimal": 59125
},
{
"icon_id": "8094809",
"name": "merge-cells",

BIN
web/src/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
web/src/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
web/src/assets/iconfont/iconfont.woff2
View File

Binary file not shown.

12
web/src/components/ui/Generating.vue
View File

@@ -13,11 +13,21 @@
<div class="bar"></div>
</div>
<div class="text">
<slot>正在生成歌曲</slot>
<slot>{{message}}</slot>
</div>
</div>
</template>
<script setup>
// eslint-disable-next-line
defineProps({
message: {
type: String,
default: '任务正在执行',
},
});
</script>
<style scoped lang="stylus">
.container {
display: flex;

4
web/src/utils/libs.js
View File

@@ -221,10 +221,10 @@ export function showLoginDialog(router) {
}
export const replaceImg =(img) => {
const devhost = "172.22.11.69"
const devHost = "172.22.11.69"
const localhost = "localhost"
if (img.includes(localhost)) {
return img?.replace(localhost, devhost)
return img?.replace(localhost, devHost)
}
return img
}

6
web/src/views/ChatPlus.vue
View File

@@ -749,12 +749,16 @@ const sendMessage = function () {
}
if (prompt.value.trim().length === 0 || canSend.value === false) {
showMessageError("请输入要发送的消息！")
return false;
}
// 如果携带了文件，则串上文件地址
let content = prompt.value
if (files.value.length > 0) {
if (files.value.length === 1) {
content += files.value.map(file => file.url).join(" ")
} else if (files.value.length > 1) {
showMessageError("当前只支持一个文件！")
return false
}
// 追加消息
chatData.value.push({

151
web/src/views/Luma.vue
View File

@@ -7,10 +7,8 @@
<el-image :src="replaceImg(img)" fit="cover"/>
<el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
</div>
<div class="btn-swap" v-if="images.length == 2 && index == 0">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" @click="switchReverse">
<path d="M96 416h832c0.32 0 0.576-0.192 0.896-0.192a30.656 30.656 0 0 0 30.976-30.976c-0.064-0.256 0.128-0.512 0.128-0.832a31.424 31.424 0 0 0-14.912-26.368l-188.48-188.48a30.72 30.72 0 1 0-43.456 43.456L852.544 352H96a32 32 0 0 0 0 64z m832 192H96c-0.32 0-0.576 0.192-0.896 0.192a30.528 30.528 0 0 0-30.976 30.976c0.064 0.256-0.128 0.512-0.128 0.832 0 11.264 6.144 20.672 14.912 26.368l188.48 188.48a30.72 30.72 0 1 0 43.456-43.456L171.456 672H928a32 32 0 0 0 0-64z"></path>
</svg>
<div class="btn-swap" v-if="images.length === 2 && index === 0">
<i class="iconfont icon-exchange" @click="switchReverse"></i>
</div>
</template>
</div>
@@ -57,45 +55,48 @@
<el-container class="video-container" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
<h2 class="h-title">你的作品</h2>
<!-- <el-row :gutter="20" class="videos">
<el-col :span="8" class="item" :key="item.id" v-for="item in videos">
<div class="video-box" @mouseover="item.playing = true" @mouseout="item.playing = false">
<img :src="item.cover" :alt="item.name" v-show="!item.playing"/>
<video :src="item.url" preload="auto" :autoplay="true" loop="loop" muted="muted" v-show="item.playing">
您的浏览器不支持视频播放
</video>
</div>
<div class="video-name">{{item.name}}</div>
<div class="opts">
<button class="btn" @click="download(item)" :disabled="item.downloading">
<i class="iconfont icon-download" v-if="!item.downloading"></i>
<el-image src="/images/loading.gif" fit="cover" v-else />
<span>下载</span>
</button>
</div>
</el-col>
</el-row> -->
<!-- <el-row :gutter="20" class="videos" v-if="!noData">-->
<!-- <el-col :span="8" class="item" :key="item.id" v-for="item in videos">-->
<!-- <div class="video-box" @mouseover="item.playing = true" @mouseout="item.playing = false">-->
<!-- <img :src="item.cover" :alt="item.name" v-show="!item.playing"/>-->
<!-- <video :src="item.url" preload="auto" :autoplay="true" loop="loop" muted="muted" v-show="item.playing">-->
<!-- 您的浏览器不支持视频播放-->
<!-- </video>-->
<!-- </div>-->
<!-- <div class="video-name">{{item.name}}</div>-->
<!-- <div class="opts">-->
<!-- <button class="btn" @click="download(item)" :disabled="item.downloading">-->
<!-- <i class="iconfont icon-download" v-if="!item.downloading"></i>-->
<!-- <el-image src="/images/loading.gif" fit="cover" v-else />-->
<!-- <span>下载</span>-->
<!-- </button>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<div class="list-box" v-if="!noData">
<div v-for="item in list" :key="item.id">
<div class="item" v-if="item.progress === 100">
<div class="item">
<div class="left">
<div class="container">
<video class="video" :src="replaceImg(item.video_url)" preload="auto" loop="loop" muted="muted">
您的浏览器不支持视频播放
</video>
<!-- <el-image :src="item.cover_url" fit="cover" /> -->
<!-- <div class="duration">{{formatTime(item.duration)}}</div> -->
<button class="play" @click="play(item)">
<img src="/images/play.svg" alt=""/>
</button>
<div v-if="item.progress === 100">
<video class="video" :src="replaceImg(item.video_url)" preload="auto" loop="loop" muted="muted">
您的浏览器不支持视频播放
</video>
<button class="play" @click="play(item)">
<img src="/images/play.svg" alt=""/>
</button>
</div>
<el-image :src="item.cover_url" fit="cover" v-else-if="item.progress > 100" />
<generating message="正在生成视频" v-else />
</div>
</div>
<div class="center">
<div class="title">{{item.prompt}}</div>
<div class="tags" v-if="item.prompt_ext">{{item.prompt_ext}}</div>
<div class="failed" v-if="item.progress === 101">任务执行失败：{{item.err_msg}}，任务提示词：{{item.prompt}}</div>
<div class="prompt" v-else>{{item.prompt}}</div>
</div>
<div class="right">
<div class="right" v-if="item.progress === 100">
<div class="tools">
<button class="btn btn-publish">
<span class="text">发布</span>
@@ -115,32 +116,15 @@
</el-tooltip>
</div>
</div>
</div>
<div class="task" v-else>
<div style="width: 160px; height: 90px; flex-shrink: 0; display: flex; align-items: center;" v-if="item.params.start_img_url">
<el-image style="width: 100%; height: 100%; border-radius: 5px;" :src="replaceImg(item.params.start_img_url)" fit="cover" />
</div>
<div class="left">
<div class="title">
<span v-if="item.title">{{item.title}}</span>
<span v-else>{{item.prompt}}</span>
</div>
</div>
<div class="center">
<div class="failed" v-if="item.progress === 101">
{{item.err_msg}}
</div>
<generating v-else>正在生成视频</generating>
</div>
<div class="right">
<el-button type="info" @click="removeJob(item)" circle>
<div class="right-error" v-else>
<el-button type="danger" @click="removeJob(item)" circle>
<i class="iconfont icon-remove"></i>
</el-button>
</div>
</div>
</div>
</div>
<el-empty :image-size="100" description="没有任何作品，赶紧去创作吧！" v-else/>
<el-empty :image-size="100" description="没有任何作品，赶紧去创作吧！" v-else />
<div class="pagination">
<el-pagination v-if="total > pageSize" background
@@ -170,10 +154,9 @@ import {onMounted, reactive, ref} from "vue";
import {CircleCloseFilled} from "@element-plus/icons-vue";
import {httpDownload, httpPost, httpGet} from "@/utils/http";
import {checkSession} from "@/store/cache";
import {showMessageError} from "@/utils/dialog";
import {showMessageError, showMessageOK} from "@/utils/dialog";
import { replaceImg } from "@/utils/libs"
import {ElMessage, ElMessageBox} from "element-plus";
import Clipboard from "clipboard";
import BlackSwitch from "@/components/ui/BlackSwitch.vue";
import Generating from "@/components/ui/Generating.vue";
import BlackDialog from "@/components/ui/BlackDialog.vue";
@@ -185,50 +168,12 @@ const images = ref([])
const formData = reactive({
prompt: '',
expand_prompt: true,
loop: true,
expand_prompt: false,
loop: false,
first_frame_img: '',
end_frame_img: ''
})
const videos = ref([
{
id: 1,
name: 'a dancing girl',
url: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/watermarked_video01944f69966f14d33b6c4486a8cfb8dde.mp4',
cover: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/video_0_thumb.jpg',
playing: false
},
{
id: 1,
name: 'a dancing girl a dancing girl a dancing girl a dancing girl a dancing girl',
url: 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/watermarked_video0e5aad607a0644c66850d1d77022db847.mp4',
cover: 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/video_1_thumb.jpg',
playing: false
},
{
id: 1,
name: 'a dancing girl',
url: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/watermarked_video01944f69966f14d33b6c4486a8cfb8dde.mp4',
cover: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/video_0_thumb.jpg',
playing: false
},
{
id: 1,
name: 'a dancing girl',
url: 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/watermarked_video0e5aad607a0644c66850d1d77022db847.mp4',
cover: 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/video_1_thumb.jpg',
playing: false
},
{
id: 1,
name: 'a dancing girl',
url: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/watermarked_video01944f69966f14d33b6c4486a8cfb8dde.mp4',
cover: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/video_0_thumb.jpg',
playing: false
},
])
const socket = ref(null)
const userId = ref(0)
const connect = () => {
@@ -361,20 +306,12 @@ const fetchData = (_page) => {
}
httpGet("/api/video/list",{page:page.value, page_size:pageSize.value, type: 'luma'}).then(res => {
total.value = res.data.total
const items = []
for (let v of res.data.items) {
if (v.progress === 100) {
//v.major_model_version = v['raw_data']['major_model_version']
}
items.push(v)
}
loading.value = false
list.value = items
list.value = res.data.items
noData.value = list.value.length === 0
}).catch(e => {
}).catch(() => {
loading.value = false
noData.value = true
showMessageError("获取作品列表失败："+e.message)
})
}
@@ -384,7 +321,7 @@ const create = () => {
const len = images.value.length;
if(len){
formData.first_frame_img = images.value[0]
if(len == 2){
if(len === 2){
formData.end_frame_img = images.value[1]
}
}

2
web/src/views/Suno.vue
View File

@@ -234,7 +234,7 @@
<div class="failed" v-if="item.progress === 101">
{{item.err_msg}}
</div>
<generating v-else />
<generating v-else message="正在生成歌曲" />
</div>
<div class="right">
<el-button type="info" @click="removeJob(item)" circle>