Spaces:
Paused
Paused
File size: 3,046 Bytes
796cb1f 34a218b 796cb1f 34a218b 796cb1f 34a218b 796cb1f 34a218b 796cb1f 34a218b 796cb1f 34a218b 796cb1f 34a218b 03fc011 34a218b b8247e8 5c44c5d f00f46e 764fa3e f00f46e 99a9568 03fc011 99a9568 03fc011 99a9568 796cb1f 34a218b 796cb1f 34a218b |
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 |
css = '''
.loader-container {
display: flex; /* Use flex to align items horizontally */
align-items: center; /* Center items vertically within the container */
white-space: nowrap; /* Prevent line breaks within the container */
}
.loader {
border: 8px solid #f3f3f3; /* Light grey */
border-top: 8px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Style the progress bar */
progress {
appearance: none; /* Remove default styling */
height: 15px; /* Set the height of the progress bar */
border-radius: 5px; /* Round the corners of the progress bar */
background-color: #f3f3f3; /* Light grey background */
width: 100%;
margin-top: 6px;
}
/* Style the progress bar container */
.progress-container {
margin-left: 5px;
margin-right: 5px;
flex-grow: 1; /* Allow the progress container to take up remaining space */
}
/* Set the color of the progress bar fill */
progress::-webkit-progress-value {
background-color: #3498db; /* Blue color for the fill */
}
progress::-moz-progress-bar {
background-color: #3498db; /* Blue color for the fill in Firefox */
}
/* Style the text on the progress bar */
progress::after {
content: attr(value '%'); /* Display the progress value followed by '%' */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white; /* Set text color */
font-size: 12px; /* Set font size */
}
/* Style other texts */
.loader-container > span {
margin-left: 5px; /* Add spacing between the progress bar and the text */
}
.progress-bar > .generating {
display: none !important;
}
.progress-bar{
height: 15px !important;
}
.stylebox{
min-height: 110px !important;
}
.generate_button {
min-height: 166px !important;
white-space: pre-line !important;
font-size: 1.33em !important;
}
.stylebox label span {
margin-bottom: 22px !important;
}
.scroll-hide{
resize: none !important;
}
.refresh_button{
border: none !important;
background: none !important;
font-size: none !important;
box-shadow: none !important;
}
#prompt-examples > .label, #greet-examples > .label {
display: none;
}
.input-label h5 {
margin: 0 !important;
}
.input-label {
margin-bottom: -10px !important;
}
.icon-buttons > a > button > div, .icon-buttons > button > div {
width: 2em;
height: 2em;
}
#toggle-greet-checkbox span {
font-size: 1.05em !important;
font-weight: var(--prose-header-text-weight) !important;
}
'''
progress_html = '''
<div class="loader-container" style="visibility:*visibility*;max-width:1280px;">
<div class="loader"></div>
<div class="progress-container">
<progress value="*number*" max="100"></progress>
</div>
<span>*text*</span>
</div>
'''
def make_progress_html(number, text):
return progress_html.replace('*number*', str(number)).replace('*text*', text).replace("*visibility*", "visible" if number >= 0 else "hidden")
|