| CSS = """ | |
| .bmc-button { | |
| padding: 2px 5px; | |
| border-radius: 5px; | |
| background-color: #FF813F; | |
| color: white; | |
| box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 20px; | |
| margin: 2px; | |
| cursor: pointer; | |
| -webkit-transition: background-color 0.3s ease; | |
| -ms-transition: background-color 0.3s ease; | |
| transition: background-color 0.3s ease; | |
| } | |
| .bmc-button:hover, | |
| .bmc-button:active, | |
| .bmc-button:focus { | |
| background-color: #FF5633; | |
| } | |
| .markdown { | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .tabs { | |
| margin-top: 0; | |
| padding-top: 0; | |
| } | |
| #md_project a { | |
| color: black; | |
| text-decoration: none; | |
| } | |
| #md_project a:hover { | |
| text-decoration: underline; | |
| } | |
| """ | |
| MARKDOWN = """ | |
| # Automatic speech recognition | |
| """ | |
| NLLB_VRAM_TABLE = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| } | |
| th, td { | |
| border: 1px solid #dddddd; | |
| text-align: left; | |
| padding: 8px; | |
| } | |
| th { | |
| background-color: #f2f2f2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <details> | |
| <summary>VRAM usage for each model</summary> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Model name</th> | |
| <th>Required VRAM</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>nllb-200-3.3B</td> | |
| <td>~16GB</td> | |
| </tr> | |
| <tr> | |
| <td>nllb-200-1.3B</td> | |
| <td>~8GB</td> | |
| </tr> | |
| <tr> | |
| <td>nllb-200-distilled-600M</td> | |
| <td>~4GB</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p><strong>Note:</strong> Be mindful of your VRAM! The table above provides an approximate VRAM usage for each model.</p> | |
| </details> | |
| </body> | |
| </html> | |
| """ |