[docs] placeholder docs in app

README.md

@@ -8,7 +8,7 @@ pinned: false
 license: apache-2.0
 ---
 
-Note: This is filler text for now, but the app will be a fine-tuning app for Hugging Face models. It will allow users to easily fine-tune models on their own datasets using Hugging Face's infrastructure.
+**Note: This is filler text for now, but the app will be a fine-tuning app for Hugging Face models. It will allow users to easily fine-tune models on their own datasets using Hugging Face's infrastructure.**
 
 ## Getting Started with Your Fine-Tuning App on Hugging Face Spaces
 

src/axolotl_ui/app.py

@@ -4,7 +4,7 @@ from shiny import App, Inputs, Outputs, Session, ui, reactive
 import shinyswatch
 from htmltools import HTML
 
-from utils import background_img, question_circle_fill
+from utils import background_img, question_circle_fill, read_markdown_file
 
 
 www_dir = Path(__file__).parent.resolve() / "www"
@@ -97,7 +97,8 @@ app_ui = ui.page_fillable(
             class_="opacity-75"
         ),
         HTML(background_img(url="https://github.com/OpenAccess-AI-Collective/axolotl/raw/main/image/axolotl.png",
-                            opacity=0.1))
+                            opacity=0.1)),
+        ui.markdown(read_markdown_file(path="README.md"))
     )
 )
 

src/axolotl_ui/utils.py

@@ -1,15 +1,17 @@
 from shiny import ui
 
+
 # https://icons.getbootstrap.com/icons/question-circle-fill/
-def question_circle_fill():
+def question_circle_fill() -> str:
     ui.HTML(
-    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle-fill mb-1" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/></svg>'
+        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle-fill mb-1" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/></svg>'
     )
 
+
 def background_img(url: str, opacity: float) -> str:
     """
     Generate CSS style for setting a somewhat transparent background image.
-    
+
     Parameters
     ----------
     url : str
@@ -45,4 +47,20 @@ def background_img(url: str, opacity: float) -> str:
         height: 100%;
     }}
     </style>
-    """
+    """
+
+
+def read_markdown_file(path):
+    with open(path, 'r') as file:
+        lines = file.readlines()
+    
+    # Find the start and end of the YAML header
+    yaml_delimiters = [i for i, line in enumerate(lines) if line.strip() == '---']
+    
+    # Skip the YAML header if it exists (assuming there are two delimiters)
+    if len(yaml_delimiters) == 2:
+        content_start = yaml_delimiters[1] + 1
+        return ''.join(lines[content_start:])
+    else:
+        # No YAML header found, return the entire content
+        return ''.join(lines)