Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 4,296 Bytes
20d2150 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
<script lang="ts">
import { createEventDispatcher, tick, getContext } from "svelte";
import { FileData } from "@gradio/client";
import LoadingSpinner from "./loading_spinner.svelte";
let uploaded_files;
const dispatch = createEventDispatcher();
import type { Client } from "@Gradio Uptime/client";
export let upload: Client["upload"];
export let root: string;
async function handle_upload(file_data: FileData): Promise<void> {
await tick();
const upload_id = Math.random().toString(36).substring(2, 15);
uploaded_files = await upload([file_data], root, upload_id);
dispatch("load", uploaded_files[0]);
}
let loading = false;
async function fetchFromDB(identifier, database): Promise<void> {
let dbs = {
pdb_assym: {
url: "https://files.rcsb.org/view/",
ext: ".pdb",
},
pdb_bioass: {
url: "https://files.rcsb.org/view/",
ext: ".pdb1",
},
af: {
url: "https://alphafold.ebi.ac.uk/files/AF-",
ext: "-F1-model_v4.pdb",
},
esm: {
url: "https://api.esmatlas.com/fetchPredictedStructure/",
ext: ".pdb",
},
// pubchem: "pubchem",
// text: "text",
};
let url = dbs[database]["url"];
let ext = dbs[database]["ext"];
// load the file and save blob
// emulate file upload by fetching from the db and triggering upload
// check if response status is 200, then return blob
loading = true;
let file = null;
try {
file = await fetch(url + identifier + ext)
.then((r) => {
loading = false;
if (r.status == 200) {
return r.blob();
} else {
dispatch("notfound");
}
})
.then((blob) => {
return new File([blob], identifier + ".pdb", { type: "text/plain" });
});
} catch (error) {
loading = false;
dispatch("notfound");
}
let file_data = new FileData({
path: identifier + ".pdb",
orig_name: identifier + ".pdb",
blob: file,
size: file.size,
mime_type: file.type,
is_stream: false,
});
await handle_upload(file_data);
}
let selectedValue = "pdb_assym";
let placeholder = "";
let textInput = "";
function handleSelect(event) {
selectedValue = event.target.value;
}
let placeholders = {
pdb_assym: "Enter PDB identifier",
pdb_bioass: "Enter PDB identifier",
af: "Enter UniProt identifier",
esm: "Enter MGnify protein identifier",
// pubchem: "Enter PubChem identifier",
// text: "Enter molecule in PDB or mol2 format",
};
$: placeholder = placeholders[selectedValue];
function isEnterPressed(event) {
if (event.key === "Enter") {
fetchFromDB(textInput, selectedValue);
}
}
</script>
<style>
.py {
padding: 10px 0;
}
.btn {
margin: 0 5px;
padding: 3px 15px;
border: var(--button-border-width) solid
var(--button-secondary-border-color);
background: var(--button-secondary-background-fill);
color: var(--button-secondary-text-color);
border-radius: var(--button-large-radius);
padding: var(--button-large-padding);
font-weight: var(--button-large-text-weight);
font-size: var(--button-large-text-size);
cursor: pointer;
}
.btn:hover {
border-color: var(--button-secondary-border-color-hover);
background: var(--button-secondary-background-fill-hover);
color: var(--button-secondary-text-color-hover);
box-shadow: var(--button-shadow-hover);
}
.or {
color: var(--body-text-color-subdued);
text-align: center;
display: block;
}
.wfull {
width: 100%;
}
.mt-2 {
margin-top: 2rem;
}
.input {
box-shadow: var(--input-shadow);
background: var(--input-background-fill);
border: var(--input-border-width) solid var(--input-border-color);
border-radius: var(--input-radius);
margin: 0 5px;
}
.select {
outline: none;
border: none;
}
.flex {
display: flex;
justify-content: space-between;
}
.inp {
width: 100%;
border: 0 #fff !important;
outline: none !important;
}
.inp:focus,
.inp:hover {
border: 0 !important;
outline: none !important;
}
.text-center {
text-align: center;
}
</style>
|