Menu tweaks.

1 year ago · bfa1bc65e0
--- a/.gitignore
+++ b/.gitignore
@@ -347,4 +347,3 @@ site/
 /LLama.Unittest/Models/*.gguf

 /LLama.Web/appsettings.Local.json
 /LLama.Web/appsettings.Local.json
--- a/Assets/web-ui-dark.png
+++ b/Assets/web-ui-dark.png
--- a/Assets/web-ui-light.png
+++ b/Assets/web-ui-light.png
--- a/LLama.Web/Pages/Index.cshtml
+++ b/LLama.Web/Pages/Index.cshtml
@@ -88,8 +88,11 @@
        </div>

        <div class="input-group mt-2">
            <textarea id="input" type="text" class="form-control" value="what is a tree?" style="resize:none" rows="4">What is an apple?</textarea>
            <button class="btn btn-primary input-control px-5" type="button" id="send" disabled="disabled" autocomplete="off">Send</button>
            <textarea id="input" type="text" class="form-control" value="what is a tree?" style="resize:none" rows="2">What is an apple?</textarea>
            <button class="btn btn-primary input-control px-4" type="button" id="send" disabled="disabled" autocomplete="off">
                Send
                <i class="bi bi-caret-right-fill"></i>
            </button>
        </div>

    </div>
--- a/LLama.Web/Pages/Shared/_Layout.cshtml
+++ b/LLama.Web/Pages/Shared/_Layout.cshtml
@@ -12,7 +12,7 @@
 </head>
 <body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow">
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm border-bottom">
            <div class="container-fluid">
                <img src="~/image/llama-sharp.png" class="navbar-image" />
                <a class="navbar-brand" asp-area="" asp-page="/Index">LLamaSharp Web</a>
@@ -27,37 +27,39 @@
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown pe-2">
                            <button class="btn btn-link nav-link dropdown-toggle" id="bd-theme" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme" aria-expanded="false">
                        <li class="nav-item dropdown theme">
                            <a id="bd-theme" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Theme
                            </button>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
                                    <a href="#" class="dropdown-item" data-bs-theme-value="light">
                                        <i class="bi bi-brightness-high pe-2"></i>
                                        Light
                                    </button>
                                    </a>
                                </li>
                                <li>
                                    <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="dark">
                                    <a href="#" class="dropdown-item d-flex" data-bs-theme-value="dark">
                                        <i class="bi bi-moon-stars pe-2"></i>
                                        Dark
                                    </button>
                                    </a>
                                </li>
                                <li>
                                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
                                    <a href="#" class="dropdown-item d-flex" data-bs-theme-value="auto">
                                        <i class="bi bi-circle-half pe-2"></i>
                                        Auto
                                    </button>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <div class="vr h-100 mx-2"></div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://github.com/SciSharp/LLamaSharp" target="_blank">
                                <div class="d-flex flex-row align-items-center">
                                    <h5 class="mb-0">
                                    <h5 class="mb-0" title="LLamaSharp on GitHub">
                                        <i class="bi bi-github"></i>
                                        <span>LLamaSharp</span>
                                    </h5>
                                </div>
                            </a>
--- a/LLama.Web/README.md
+++ b/LLama.Web/README.md
@@ -1,13 +1,13 @@
 ## LLama.Web - Basic ASP.NET Core examples of LLamaSharp in action
 ## LLama.Web - Basic ASP.NET Core example of LLamaSharp in action
 LLama.Web has no heavy dependencies and no extra frameworks over bootstrap, jquery and mustache to keep the examples clean and easy to copy over to your own project

 ## Websockets
 Using signalr websockets simplifies the streaming of responses and model per connection management

 ## Setup
 Models, Prompts and Inference parameters can be added to the appsettings.json.
 If you would like to add your own local model files then it's best to create an appSettings.Local.json file
 and add them there.  The appSettings.Local.json file will be ignored by Git.
 Models, Prompts and Inference parameters can be added to `appsettings.json`.
 If you would like to add your own local model files then it's best to create an `appSettings.Local.json` file
 and add them there.  The `appSettings.Local.json` file will be ignored by Git.

 **Models**
 You can add multiple models to the options for quick selection in the UI, options are based on ModelParams so its fully configurable.
--- a/LLama.Web/wwwroot/css/site.css
+++ b/LLama.Web/wwwroot/css/site.css
@@ -34,6 +34,7 @@ footer {
 #scroll-container {
    flex: 1;
    overflow-y: auto;
    border-radius: var(--bs-border-radius);
 }

 .slider-container > .slider {
@@ -55,8 +56,8 @@ footer {
    margin-right: 10px;
 }

 #scroll-container {
    border-radius: var(--bs-border-radius);
 .nav-item.theme {
    margin-top: 2px;
 }

 /* Dark theme values */