Hugging Face's logo

Spaces:
ThorbenF
/
test_webpage
Running

App Files Community
ThorbenF commited on
Commit
0c18e19
·
1 Parent(s): 58a0b29

Update

Browse files
Files changed (2) hide show
  1. .ipynb_checkpoints/app-checkpoint.py +37 -16
  2. app.py +37 -16
.ipynb_checkpoints/app-checkpoint.py CHANGED
@@ -135,24 +135,45 @@ def predict_protein_sequence(test_one_letter_sequence):
135
  # Launch the app
136
  #interface.launch()
137
 
138
- # Function to fetch and visualize the PDB structure using py3Dmol
139
  def fetch_and_display_pdb(pdb_id):
140
- # Fetch the PDB structure from the RCSB
141
- pdb_url = f'https://files.rcsb.org/download/{pdb_id}.pdb'
142
- response = requests.get(pdb_url)
143
-
144
- if response.status_code == 200:
145
- pdb_structure = response.text
146
- else:
147
- return "Failed to load PDB structure. Please check the PDB ID."
148
 
149
- # Initialize the viewer
150
- viewer = py3Dmol.view(width=800, height=400)
151
- viewer.addModel(pdb_structure, "pdb")
152
- viewer.setStyle({}, {"cartoon": {"color": "spectrum"}})
153
- viewer.zoomTo()
154
-
155
- return viewer._make_html()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156
 
157
  # Define the Gradio interface
158
  def gradio_interface(sequence, pdb_id):
 
135
  # Launch the app
136
  #interface.launch()
137
 
138
+
139
  def fetch_and_display_pdb(pdb_id):
140
+ # Construct the PDB URL
141
+ pdb_url = f"https://files.rcsb.org/download/{pdb_id}.pdb"
 
 
 
 
 
 
142
 
143
+ # Try fetching the PDB file
144
+ response = requests.get(pdb_url)
145
+ if response.status_code != 200:
146
+ return "Failed to fetch PDB file"
147
+
148
+ # Get the structure content as text
149
+ structure_text = response.text
150
+
151
+ # Create the HTML content with embedded 3Dmol.js
152
+ html_content = f"""
153
+ <html>
154
+ <head>
155
+ <script src="https://3Dmol.js.org/build/3Dmol-min.js"></script>
156
+ <style>
157
+ #viewer {{
158
+ width: 800px;
159
+ height: 600px;
160
+ }}
161
+ </style>
162
+ </head>
163
+ <body>
164
+ <div id="viewer"></div>
165
+ <script>
166
+ const viewer = $3Dmol.createViewer("viewer", {{ backgroundColor: "white" }});
167
+ viewer.addModel(`{structure_text}`, "pdb");
168
+ viewer.setStyle({}, {{ cartoon: {{ color: "spectrum" }} }});
169
+ viewer.zoomTo();
170
+ viewer.render();
171
+ </script>
172
+ </body>
173
+ </html>
174
+ """
175
+ return html_content
176
+
177
 
178
  # Define the Gradio interface
179
  def gradio_interface(sequence, pdb_id):
app.py CHANGED
@@ -135,24 +135,45 @@ def predict_protein_sequence(test_one_letter_sequence):
135
  # Launch the app
136
  #interface.launch()
137
 
138
- # Function to fetch and visualize the PDB structure using py3Dmol
139
  def fetch_and_display_pdb(pdb_id):
140
- # Fetch the PDB structure from the RCSB
141
- pdb_url = f'https://files.rcsb.org/download/{pdb_id}.pdb'
142
- response = requests.get(pdb_url)
143
-
144
- if response.status_code == 200:
145
- pdb_structure = response.text
146
- else:
147
- return "Failed to load PDB structure. Please check the PDB ID."
148
 
149
- # Initialize the viewer
150
- viewer = py3Dmol.view(width=800, height=400)
151
- viewer.addModel(pdb_structure, "pdb")
152
- viewer.setStyle({}, {"cartoon": {"color": "spectrum"}})
153
- viewer.zoomTo()
154
-
155
- return viewer._make_html()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156
 
157
  # Define the Gradio interface
158
  def gradio_interface(sequence, pdb_id):
 
135
  # Launch the app
136
  #interface.launch()
137
 
138
+
139
  def fetch_and_display_pdb(pdb_id):
140
+ # Construct the PDB URL
141
+ pdb_url = f"https://files.rcsb.org/download/{pdb_id}.pdb"
 
 
 
 
 
 
142
 
143
+ # Try fetching the PDB file
144
+ response = requests.get(pdb_url)
145
+ if response.status_code != 200:
146
+ return "Failed to fetch PDB file"
147
+
148
+ # Get the structure content as text
149
+ structure_text = response.text
150
+
151
+ # Create the HTML content with embedded 3Dmol.js
152
+ html_content = f"""
153
+ <html>
154
+ <head>
155
+ <script src="https://3Dmol.js.org/build/3Dmol-min.js"></script>
156
+ <style>
157
+ #viewer {{
158
+ width: 800px;
159
+ height: 600px;
160
+ }}
161
+ </style>
162
+ </head>
163
+ <body>
164
+ <div id="viewer"></div>
165
+ <script>
166
+ const viewer = $3Dmol.createViewer("viewer", {{ backgroundColor: "white" }});
167
+ viewer.addModel(`{structure_text}`, "pdb");
168
+ viewer.setStyle({}, {{ cartoon: {{ color: "spectrum" }} }});
169
+ viewer.zoomTo();
170
+ viewer.render();
171
+ </script>
172
+ </body>
173
+ </html>
174
+ """
175
+ return html_content
176
+
177
 
178
  # Define the Gradio interface
179
  def gradio_interface(sequence, pdb_id):