added copy model info

This commit is contained in:
AndzejsP 2023-06-08 17:58:02 +03:00
parent 442a3ba70c
commit 5c613ded45
2 changed files with 41 additions and 7 deletions

View File

@ -1,5 +1,6 @@
<template>
<div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer active:scale-95 duration-75 select-none"
<div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer active:opacity-80 duration-75 "
@click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
@ -10,13 +11,18 @@
{{ title }}
</h3>
</div>
</div>
<div class="flex-1" v-if="!model.isCustomModel">
<div class="flex gap-3 items-center">
<div class="flex flex-row gap-3 items-center ">
<img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill" :class="linkNotValid ? 'grayscale':''">
<h3 class="font-bold font-large text-lg">
{{ title }}
</h3>
<div class="flex-grow">
</div>
</div>
<div class="flex flex-shrink-0 items-center ">
<i data-feather="download" class="w-5 m-1" ></i>
@ -60,7 +66,11 @@
</div>
<p class="mx-1 opacity-80">{{ description }}</p>
</div>
<div class="flex-shrink-0" >
<div class="flex flex-row flex-shrink-0 items-center" >
<button class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
title="Copy model info to clipboard" @click.stop="toggleCopy()">
<i data-feather="clipboard"></i>
</button>
<button v-if="model_type !== 'api'" class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
:class="[isInstalled ? 'bg-red-500 hover:bg-red-600' : linkNotValid ? 'bg-gray-500 hover:bg-gray-600' : 'bg-green-500 hover:bg-green-600']"
:disabled="installing || uninstalling" @click.stop="toggleInstall">
@ -88,6 +98,7 @@
</div>
</div>
</template>
<script>
@ -110,6 +121,7 @@ export default {
onInstall: Function,
onUninstall: Function,
onSelected: Function,
onCopy: Function,
selected: Boolean,
model: Object,
model_type: String
@ -215,11 +227,20 @@ export default {
toggleSelected() {
this.onSelected(this)
},
toggleCopy() {
this.onCopy(this)
},
handleSelection() {
if (this.isInstalled && !this.selected) {
this.onSelected(this);
}
}
},
copyContentToClipboard() {
console.log('asdasdas')
this.$emit('copy', 'this.message.content')
},
},
watch:{
linkNotValid(){

View File

@ -80,7 +80,8 @@
<div class=" text-base font-semibold cursor-pointer select-none items-center">
<div class="flex gap-2 items-center ">
<svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24">
<path fill="currentColor"
d="M17 17H7V7h10m4 4V9h-2V7a2 2 0 0 0-2-2h-2V3h-2v2h-2V3H9v2H7c-1.11 0-2 .89-2 2v2H3v2h2v2H3v2h2v2a2 2 0 0 0 2 2h2v2h2v-2h2v2h2v-2h2a2 2 0 0 0 2-2v-2h2v-2h-2v-2m-6 2h-2v-2h2m2-2H9v6h6V9Z" />
</svg>
@ -247,7 +248,7 @@
:license="model.license" :description="model.description"
:is-installed="model.isInstalled" :on-install="onInstall" :on-uninstall="onUninstall"
:on-selected="onSelected" :selected="model.title === configFile.model_name"
:model="model" :model_type="model.model_type" />
:model="model" :model_type="model.model_type" :on-copy="onCopy" />
</TransitionGroup>
</div>
</div>
@ -284,7 +285,7 @@
<div class="flex gap-1 items-center">
<img :src="imgPersonality" class="w-8 h-8 rounded-full object-fill text-red-700">
<h3 class="font-bold font-large text-lg line-clamp-1" >
<h3 class="font-bold font-large text-lg line-clamp-1">
{{ this.configFile.personality_folder }}
</h3>
</div>
@ -758,6 +759,18 @@ export default {
}
},
onCopy(modelEntry) {
let content
if (!modelEntry.model.isCustomModel) {
content = `Model name: ${modelEntry.title}\nFile size: ${modelEntry.fileSize}\nDownload: ${modelEntry.path}\nLicense: ${modelEntry.license}\nOwner: ${modelEntry.owner}\nWebsite: ${modelEntry.owner_link}\nDescription: ${modelEntry.description}`
} else {
content = `Model name: ${modelEntry.title}\nFile size: ${modelEntry.fileSize}\nManually downloaded model `
}
this.$refs.toast.showToast("Copied model info to clipboard!", 4, true)
navigator.clipboard.writeText(content.trim());
},
// Model installation
onInstall(model_object) {