Hugging Face's logo

Spaces:
HouBioLab
/
MotifAlign
Sleeping

App Files Community
jiehou commited on
Commit
7a082af
·
verified ·
1 Parent(s): 3b0df08

Update visualization_multi.py

Browse files
Files changed (1) hide show
  1. visualization_multi.py +114 -0
visualization_multi.py CHANGED
@@ -264,6 +264,22 @@ def create_pairwise_visualization(ref_path, query_path, ref_window, query_window
264
  font-size: 12px;
265
  text-transform: uppercase;
266
  }}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
267
  </style>
268
  </head>
269
  <body>
@@ -351,6 +367,11 @@ def create_pairwise_visualization(ref_path, query_path, ref_window, query_window
351
  <option value="gray">Gray</option>
352
  </select>
353
  </div>
 
 
 
 
 
354
  </div>
355
 
356
  <script>
@@ -518,6 +539,38 @@ def create_pairwise_visualization(ref_path, query_path, ref_window, query_window
518
 
519
  // Initialize
520
  updateDisplay();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
521
  </script>
522
  </body>
523
  </html>
@@ -773,6 +826,22 @@ def create_multistructure_visualization(ref_path, ref_window, ref_com, query_dat
773
  font-size: 12px;
774
  text-transform: uppercase;
775
  }}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
776
  </style>
777
  </head>
778
  <body>
@@ -808,6 +877,11 @@ def create_multistructure_visualization(ref_path, ref_window, ref_com, query_dat
808
  Show Residue Labels
809
  </label>
810
  </div>
 
 
 
 
 
811
  </div>
812
 
813
  <script>
@@ -819,6 +893,46 @@ def create_multistructure_visualization(ref_path, ref_window, ref_com, query_dat
819
 
820
  // Initialize
821
  updateDisplay();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
822
  </script>
823
  </body>
824
  </html>
 
264
  font-size: 12px;
265
  text-transform: uppercase;
266
  }}
267
+
268
+ .download-btn {{
269
+ width: 100%;
270
+ padding: 8px;
271
+ background: #0066cc;
272
+ color: white;
273
+ border: none;
274
+ border-radius: 4px;
275
+ cursor: pointer;
276
+ font-size: 13px;
277
+ font-weight: bold;
278
+ margin-top: 5px;
279
+ }}
280
+ .download-btn:hover {{
281
+ background: #0052a3;
282
+ }}
283
  </style>
284
  </head>
285
  <body>
 
367
  <option value="gray">Gray</option>
368
  </select>
369
  </div>
370
+
371
+ <div class="control-section">
372
+ <div class="section-title">Download</div>
373
+ <button class="download-btn" onclick="downloadImage()">📸 Save as JPEG</button>
374
+ </div>
375
  </div>
376
 
377
  <script>
 
539
 
540
  // Initialize
541
  updateDisplay();
542
+
543
+ // Download functionality
544
+ window.viewer = viewer;
545
+
546
+ function downloadImage() {{
547
+ try {{
548
+ const imgData = viewer.pngURI();
549
+ const img = new Image();
550
+ img.onload = function() {{
551
+ const canvas = document.createElement('canvas');
552
+ canvas.width = img.width;
553
+ canvas.height = img.height;
554
+ const ctx = canvas.getContext('2d');
555
+ ctx.fillStyle = 'white';
556
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
557
+ ctx.drawImage(img, 0, 0);
558
+ canvas.toBlob(function(blob) {{
559
+ const url = URL.createObjectURL(blob);
560
+ const a = document.createElement('a');
561
+ a.href = url;
562
+ a.download = 'rna_pairwise_comparison.jpg';
563
+ document.body.appendChild(a);
564
+ a.click();
565
+ document.body.removeChild(a);
566
+ URL.revokeObjectURL(url);
567
+ }}, 'image/jpeg', 0.95);
568
+ }};
569
+ img.src = imgData;
570
+ }} catch(e) {{
571
+ alert('Error: ' + e.message);
572
+ }}
573
+ }}
574
  </script>
575
  </body>
576
  </html>
 
826
  font-size: 12px;
827
  text-transform: uppercase;
828
  }}
829
+
830
+ .download-btn {{
831
+ width: 100%;
832
+ padding: 8px;
833
+ background: #0066cc;
834
+ color: white;
835
+ border: none;
836
+ border-radius: 4px;
837
+ cursor: pointer;
838
+ font-size: 13px;
839
+ font-weight: bold;
840
+ margin-top: 5px;
841
+ }}
842
+ .download-btn:hover {{
843
+ background: #0052a3;
844
+ }}
845
  </style>
846
  </head>
847
  <body>
 
877
  Show Residue Labels
878
  </label>
879
  </div>
880
+
881
+ <div class="control-section">
882
+ <div class="section-title">Download</div>
883
+ <button class="download-btn" onclick="downloadImage()">📸 Save as JPEG</button>
884
+ </div>
885
  </div>
886
 
887
  <script>
 
893
 
894
  // Initialize
895
  updateDisplay();
896
+
897
+ // Download functionality
898
+ window.viewer = viewer; // Make viewer globally accessible
899
+
900
+ function downloadImage() {{
901
+ try {{
902
+ // Use 3Dmol.js built-in PNG export
903
+ const imgData = viewer.pngURI();
904
+
905
+ // Convert PNG to JPEG with white background
906
+ const img = new Image();
907
+ img.onload = function() {{
908
+ const canvas = document.createElement('canvas');
909
+ canvas.width = img.width;
910
+ canvas.height = img.height;
911
+ const ctx = canvas.getContext('2d');
912
+
913
+ // White background for JPEG
914
+ ctx.fillStyle = 'white';
915
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
916
+ ctx.drawImage(img, 0, 0);
917
+
918
+ // Convert to JPEG and download
919
+ canvas.toBlob(function(blob) {{
920
+ const url = URL.createObjectURL(blob);
921
+ const a = document.createElement('a');
922
+ a.href = url;
923
+ a.download = 'rna_multi_structure_comparison.jpg';
924
+ document.body.appendChild(a);
925
+ a.click();
926
+ document.body.removeChild(a);
927
+ URL.revokeObjectURL(url);
928
+ }}, 'image/jpeg', 0.95);
929
+ }};
930
+ img.src = imgData;
931
+ }} catch(e) {{
932
+ alert('Error capturing image: ' + e.message);
933
+ console.error(e);
934
+ }}
935
+ }}
936
  </script>
937
  </body>
938
  </html>