mirror of
https://github.com/gradio-app/gradio.git
synced 2025-02-05 11:10:03 +08:00
Fix deployed Spaces (#10271)
* changes
* Revert "Revert "changes""
This reverts commit 32bed0d5d0.
* improve styling
* changes
* one more try
This commit is contained in:
Abubakar Abid
GitHub
parent
da0770748d
commit
2b23e7f7a5
@ -16,83 +16,142 @@
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar styling */
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 100vh;
|
||||
max-height: calc(100vh - 50px);
|
||||
width: 300px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
font-size: 0.875rem; /* 14px */
|
||||
line-height: 1.25rem; /* 20px */
|
||||
transition: width 0.3s ease;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #f8f9fa;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
padding-top: 50px; /* Add padding for the button */
|
||||
}
|
||||
|
||||
/* Customize scrollbar */
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
padding: 8px 16px;
|
||||
margin: 8px 12px;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
color: rgb(107 114 128);
|
||||
color: #424242;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
color: black;
|
||||
transform: translateX(1px);
|
||||
color: #1a73e8;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Apply a different style to the selected item in the sidebar */
|
||||
.sidebar a.active {
|
||||
background-color: rgb(251 146 60);
|
||||
background: #1a73e8;
|
||||
color: white;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 8px rgba(26, 115, 232, 0.2);
|
||||
}
|
||||
|
||||
/* Styling for the close button */
|
||||
.close-btn {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: white;
|
||||
font-size: xx-large;
|
||||
position: relative;
|
||||
/* Error state for demos that don't work */
|
||||
.sidebar a:has(span) {
|
||||
border-left: 3px solid #dc3545;
|
||||
}
|
||||
|
||||
/* Styling for the content */
|
||||
/* Content area styling */
|
||||
.content {
|
||||
margin-left: 300px;
|
||||
padding: 20px;
|
||||
display: block;
|
||||
height: 100vh;
|
||||
transition: margin-left 0.3s ease;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.content.collapsed {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Make the iframe responsive */
|
||||
.content iframe {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
border: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Toggle button styling */
|
||||
.close-btn {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 101;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: #f8f9fa;
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
justify-content: flex-end;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.close-btn.collapsed {
|
||||
width: 50px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
/* Adjust styles for smaller screens */
|
||||
.close-btn {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: white;
|
||||
z-index: 102; /* Ensure it's above the sidebar */
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: auto;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 0;
|
||||
padding: 10px;
|
||||
height: calc(100vh - 70px);
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.content.collapsed {
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -100,12 +159,12 @@
|
||||
</head>
|
||||
<body x-data="{ current_demo: '{{ initial_demo }}', is_collapsed: false }">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<div>
|
||||
<button @click="is_collapsed = !is_collapsed" class="close-btn">
|
||||
<a x-text="is_collapsed ? '➡️' : '⬅️'"></a>
|
||||
</button>
|
||||
</div>
|
||||
<div :class="{ 'sidebar': true, 'collapsed': is_collapsed }" style="margin-top: 50px;">
|
||||
<button @click="is_collapsed = !is_collapsed"
|
||||
class="close-btn"
|
||||
:class="{ 'collapsed': is_collapsed }">
|
||||
<span x-text="is_collapsed ? '➡️' : '⬅️'"></span>
|
||||
</button>
|
||||
<div :class="{ 'sidebar': true, 'collapsed': is_collapsed }">
|
||||
{% for name in names %}
|
||||
<a @click="current_demo = '{{ name[0] }}'" :class="current_demo == '{{ name[0] }}' ? 'active' : ''">{{ name[0] }} {% if name[1] %}❌{% endif %}</a>
|
||||
{% endfor %}
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
"""
|
||||
We pull in a select number of spaces and build them into a single FastAPI application to preview them on HF Spaces.
|
||||
The script that is run in CI is located at: https://github.com/gradio-app/github/blob/main/packages/copy-demos/index.ts
|
||||
This is the Python version of that script for local use.
|
||||
"""
|
||||
|
||||
import argparse
|
||||
import os
|
||||
import pathlib
|
||||
@ -55,8 +61,8 @@ if __name__ == "__main__":
|
||||
parser = argparse.ArgumentParser(
|
||||
description="Copy all demos to all_demos and update requirements"
|
||||
)
|
||||
parser.add_argument("gradio_version", type=str, help="Gradio")
|
||||
parser.add_argument("gradio_client_version", type=str, help="Gradio Client Version")
|
||||
parser.add_argument("--gradio-version", type=str, help="Gradio", default="5.9.1", required=False)
|
||||
parser.add_argument("--gradio-client-version", type=str, help="Gradio Client Version", default="1.5.2", required=False)
|
||||
args = parser.parse_args()
|
||||
|
||||
source_dir = pathlib.Path(pathlib.Path(__file__).parent, "..", "demo")
|
||||
|
||||
@ -236,7 +236,7 @@ The `spaces` preview is a little more involved as it is a custom process and req
|
||||
|
||||
The process is relatively straightforward, and follows [the steps mentioned above](#spaces) but there a few details to be aware of.
|
||||
|
||||
- We use [a custom script](https://github.com/gradio-app/gradio/blob/main/scripts/copy_demos.py) to pull in a select number of spaces and build them into a single FastAPI application. We serve each demo on its own subpath. This is the demo app that gets deployed to spaces.
|
||||
- We use [a custom script](https://github.com/gradio-app/github/blob/main/packages/copy-demos/index.ts) to pull in a select number of spaces and build them into a single FastAPI application. We serve each demo on its own subpath. This is the demo app that gets deployed to spaces.
|
||||
- We build a new wheel from the pull requests source code and upload it to s3, we then add the url for this wheel to the requirements.txt of the space we are deploying.
|
||||
- The wheel name (and subsequently the url) include the commit SHA, every build is unique even for the same pull request
|
||||
- It is important the 'version' of the wheel is the same as the latest version of Gradio. This is because spaces _first_ installs the requirements from the `requirements.txt` and _then_ installs whatever it needs to based on the `sdk` field of the spaces `README.md`. Since the `sdk` is set to Gradio in this case, it will attempt to install the latest version of Gradio and see that the version requirement is already satisfied. If we didn't have matching versions then our custom wheel would be overwritten.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user