ui.py 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import gradio as gr
  2. refresh_symbol = '\U0001f504' # 🔄
  3. css = """
  4. .tabs.svelte-710i53 {
  5. margin-top: 0
  6. }
  7. .py-6 {
  8. padding-top: 2.5rem
  9. }
  10. .dark #refresh-button {
  11. background-color: #ffffff1f;
  12. }
  13. #refresh-button {
  14. flex: none;
  15. margin: 0;
  16. padding: 0;
  17. min-width: 50px;
  18. border: none;
  19. box-shadow: none;
  20. border-radius: 10px;
  21. background-color: #0000000d;
  22. }
  23. #download-label, #upload-label {
  24. min-height: 0
  25. }
  26. #accordion {
  27. }
  28. .dark svg {
  29. fill: white;
  30. }
  31. svg {
  32. display: unset !important;
  33. vertical-align: middle !important;
  34. margin: 5px;
  35. }
  36. ol li p, ul li p {
  37. display: inline-block;
  38. }
  39. #main, #settings, #extensions, #chat-settings {
  40. border: 0;
  41. }
  42. """
  43. chat_css = """
  44. .h-\[40vh\], .wrap.svelte-byatnx.svelte-byatnx.svelte-byatnx {
  45. height: 66.67vh
  46. }
  47. .gradio-container {
  48. max-width: 800px !important;
  49. margin-left: auto !important;
  50. margin-right: auto !important;
  51. }
  52. .w-screen {
  53. width: unset
  54. }
  55. div.svelte-362y77>*, div.svelte-362y77>.form>* {
  56. flex-wrap: nowrap
  57. }
  58. /* fixes the API documentation in chat mode */
  59. .api-docs.svelte-1iguv9h.svelte-1iguv9h.svelte-1iguv9h {
  60. display: grid;
  61. }
  62. .pending.svelte-1ed2p3z {
  63. opacity: 1;
  64. }
  65. """
  66. page_js = """
  67. document.getElementById("main").parentNode.childNodes[0].style = "border: none; background-color: #8080802b; margin-bottom: 40px"
  68. document.getElementById("main").parentNode.style = "padding: 0; margin: 0"
  69. document.getElementById("main").parentNode.parentNode.parentNode.style = "padding: 0"
  70. """
  71. class ToolButton(gr.Button, gr.components.FormComponent):
  72. """Small button with single emoji as text, fits inside gradio forms"""
  73. def __init__(self, **kwargs):
  74. super().__init__(variant="tool", **kwargs)
  75. def get_block_name(self):
  76. return "button"
  77. def create_refresh_button(refresh_component, refresh_method, refreshed_args, elem_id):
  78. def refresh():
  79. refresh_method()
  80. args = refreshed_args() if callable(refreshed_args) else refreshed_args
  81. for k, v in args.items():
  82. setattr(refresh_component, k, v)
  83. return gr.update(**(args or {}))
  84. refresh_button = ToolButton(value=refresh_symbol, elem_id=elem_id)
  85. refresh_button.click(
  86. fn=refresh,
  87. inputs=[],
  88. outputs=[refresh_component]
  89. )
  90. return refresh_button