Differences

This shows you the differences between two versions of the page.

--- ai:private-gpt [2024/04/23 21:53] – Wulf Rajek
+++ ai:private-gpt [2024/05/01 17:33] (current) – Wulf Rajek
@@ Line 339: / Line 339: @@
 git apply token-ctx-temp-settings-option.patch
 </code>
+===== CSS Customisation =====
+To adjust the main input box and fix mobile/low height browser window issue of the input box wrapping to the right, some css trickery is required. The last three css lines are added to privategpt/ui/ui.py for this:
+<code python privategpt/ui/ui.py>
+def _build_ui_blocks(self) -> gr.Blocks:
+        logger.debug("Creating the UI blocks")
+        with gr.Blocks(
+            title=UI_TAB_TITLE,
+            theme=gr.themes.Soft(primary_hue=slate),
+            css=".logo { "
+            "display:flex;"
+            "background-color: #000;"
+            "height: 90px;"
+            "border-radius: 8px;"
+            "align-content: center;"
+            "justify-content: center;"
+            "align-items: center;"
+            "font-size: xxx-large;"
+            "color: #fff;"
+            "font-weight: bold;"
+            "}"
+            ".logo img { height: 100% }"
+            ".contain { display: flex !important; flex-direction: column !important; }"
+            "#component-0, #component-3, #component-10, #component-8  { height: 100% !important; }"
+            "#chatbot { flex-grow: 1 !important; overflow: auto !important;}"
+            "#col { height: calc(100vh - 112px - 16px) !important; }"
+            "#component-24 > label:nth-child(1) > textarea:nth-child(2) { min-height: 100px !important; }"
+            "#component-24 { min-width: min(260px, 100%) !important;}"
+            "#col { min-height:750px !important; }",
+        ) as blocks:
+            with gr.Row():
+</code>