Deploy 7977791 from GitHub

R/config.R

@@ -4,8 +4,8 @@
 # behaviour.
 
 # Version of this app
-APP_VERSION <- "1.0.0"
-APP_DATE <- "24 October 2026"
+APP_VERSION <- "1.0.1"
+APP_DATE <- "30 October 2026"
 
 # Model used for every call. This is the ONLY place a model id may be written
 # (tests/testthat/test-config.R enforces this).
@@ -60,9 +60,11 @@ USAGE_TOKEN_VAR <- "HF_USAGE_TOKEN"
 USAGE_REPO <- "fmegahed/decisions-space-usage"
 STATUS_URL <- "https://raw.githubusercontent.com/fmegahed/decisions-space/main/status/status.csv"
 
-# Address of the Space, and the video on YouTube ("" hides the Video button)
+# Address of the Space, and the help video on YouTube ("" hides its buttons)
+# with its length in whole minutes (the video runs 4:59)
 SPACE_HOST <- "https://fmegahed-decisions.hf.space"
 VIDEO_URL <- "https://youtu.be/4WE-ykXzK1g"
+VIDEO_MINUTES <- 5
 
 # The values that the help text uses, in one named list
 app_config <- function() {
@@ -77,6 +79,6 @@ app_config <- function() {
     max_description = MAX_DESCRIPTION, answer_range = ANSWER_RANGE,
     max_references = MAX_REFERENCES, chunk_size = CHUNK_SIZE,
     image_settings = IMAGE_SETTINGS, space_host = SPACE_HOST,
-    video_url = VIDEO_URL
+    video_url = video_url(), video_minutes = VIDEO_MINUTES
   )
 }

R/help.R

@@ -56,7 +56,10 @@ help_text <- function(key) {
   )
 }
 
-# The text of the About tab, as Markdown
+# The text of the About tab, as Markdown. HELP_VIDEO_MARK marks the place of
+# the button that opens the help video (about_panel() puts it there).
+HELP_VIDEO_MARK <- "<!-- help-video-button -->"
+
 about_text <- function(cfg = app_config()) {
   usd <- \(x) paste("USD", format(x, big.mark = ","))
   num <- \(x) format(x, big.mark = ",")
@@ -65,6 +68,19 @@ about_text <- function(cfg = app_config()) {
     "",
     "This app asks Jev, a decision model of TypeSafe, a question about each image or text in a set. For each input, it shows the answer and the probability of each answer. It also gives the R code of the run and a bundle with the setup and the answers. You need no key and no account.",
     "",
+    if (nzchar(cfg$video_url)) {
+      c(
+        "## Help video",
+        "",
+        sprintf(
+          "A %d-minute video shows how to use the app: a sample of images, your own images, a text sample and your own texts. It explains the three question types (Yes / no, Choice and Score), the answers and the R code. Watch it here, or [on YouTube](%s) with chapters.",
+          cfg$video_minutes, cfg$video_url
+        ),
+        "",
+        HELP_VIDEO_MARK,
+        ""
+      )
+    },
     "## Package",
     "",
     sprintf(
@@ -115,6 +131,9 @@ about_text <- function(cfg = app_config()) {
       cfg$version, cfg$date, decisions_version(), cfg$model
     ),
     "",
+    "- 1.0.1: the help video (in the intro, the top bar and this page); the buttons of the top bar on one line.",
+    "- 1.0.0: the first public version.",
+    "",
     "## Cite",
     "",
     sprintf(

R/ui.R

@@ -125,17 +125,18 @@ top_bar <- function(video) {
         class = "chip", shiny::span(class = "dot", `aria-hidden` = "true", "\u25cf"), " ",
         shiny::textOutput("status_chip", inline = TRUE)
       ),
-      if (nzchar(video)) {
-        shiny::tags$button(
-          id = "open_video", type = "button", class = "btn btn-quiet",
-          `aria-haspopup` = "dialog", "Video"
-        )
-      },
       shiny::div(
         class = "import-btn",
         upload_input("import_file", NULL, c(".zip", ".json"), button = "Import")
       ),
-      samples_menu()
+      samples_menu(),
+      # The quiet way to the help video: on every tab, and after Hide
+      if (nzchar(video)) {
+        shiny::tags$button(
+          id = "open_video_bar", type = "button", class = "btn btn-quiet help-video-bar open-video",
+          `aria-haspopup` = "dialog", shiny::span(class = "tri", `aria-hidden` = "true"), "Help video"
+        )
+      }
     )
   )
 }
@@ -205,7 +206,17 @@ sidebar <- function() {
 
 # --- Build tab: cards -------------------------------------------------------
 
-intro_card <- function() {
+# The yellow button that opens the help video (in the intro and in About)
+help_video_button <- function(id) {
+  shiny::tags$button(
+    id = id, type = "button", class = "btn-help-video open-video", `aria-haspopup` = "dialog",
+    shiny::span(class = "play", `aria-hidden` = "true"),
+    sprintf("Watch our %d-minute intro video on how to use this app", VIDEO_MINUTES)
+  )
+}
+
+# The intro, with the help video as the first step of a first visit
+intro_card <- function(video = video_url()) {
   step <- \(n, name, text) {
     shiny::tags$li(
       shiny::span(class = "num", `aria-hidden` = "true", n),
@@ -216,7 +227,8 @@ intro_card <- function() {
     id = "intro", class = "card intro", `aria-label` = "Intro",
     shiny::div(
       shiny::p(class = "intro-lead", "Ask a model a question about each image or text."),
-      shiny::p(class = "intro-help", help_text("intro"), " ", shiny::actionLink("intro_hide", "Hide"))
+      shiny::p(class = "intro-help", help_text("intro"), " ", shiny::actionLink("intro_hide", "Hide")),
+      if (nzchar(video)) shiny::div(class = "help-video-row", help_video_button("open_video"))
     ),
     shiny::tags$ol(
       class = "steps",
@@ -318,10 +330,12 @@ build_panel <- function() {
 # --- About and Uptime tabs --------------------------------------------------
 
 about_panel <- function() {
-  # The About text is Markdown; its links open in a new tab
+  # The About text is Markdown; its links open in a new tab. The button of
+  # the help video goes at its mark.
   html <- shiny::markdown(help_text("about")) |>
     as.character() |>
-    stringr::str_replace_all("<a href=", '<a target="_blank" rel="noopener" href=')
+    stringr::str_replace_all("<a href=", '<a target="_blank" rel="noopener" href=') |>
+    stringr::str_replace(stringr::fixed(HELP_VIDEO_MARK), as.character(help_video_button("open_video_about")))
   shiny::div(class = "page card", shiny::div(class = "bd prose", htmltools::HTML(html)))
 }
 
@@ -371,11 +385,11 @@ video_dialog <- function(url) {
     id = "video_dialog", class = "video-dialog", `aria-labelledby` = "video_title",
     shiny::div(
       class = "video-head",
-      shiny::h2(id = "video_title", "Video"),
+      shiny::h2(id = "video_title", "Help video"),
       shiny::tags$button(id = "close_video", type = "button", class = "btn btn-quiet sm", "Close")
     ),
     shiny::tags$iframe(
-      id = "video_frame", class = "video-frame", title = "Video of the decisions app",
+      id = "video_frame", class = "video-frame", title = "Help video: how to use the decisions app",
       `data-src` = video_embed(url), allow = "autoplay; encrypted-media; picture-in-picture; fullscreen",
       referrerpolicy = "strict-origin-when-cross-origin"
     )

README.md

@@ -20,6 +20,8 @@ The app uses the R package [decisions](https://github.com/fmegahed/decisions) (v
 
 Open the app: <https://huggingface.co/spaces/fmegahed/decisions>
 
+Help video (5 minutes, with chapters): <https://youtu.be/4WE-ykXzK1g>
+
 ## Privacy
 
 Your images, texts and references go to TypeSafe (Jev). Do not upload confidential data. The app keeps no input after your session. It stores only the daily totals of calls, tokens and cost. The bundle and the logs hold no key.
@@ -87,4 +89,4 @@ Fadel M. Megahed (Miami University) and Ying-Ju (Tessa) Chen (University of Dayt
 If you use the package or the app, cite both:
 
 - Megahed, F. M., & Chen, Y.-J. (2026). *decisions: Typed decisions from decision models* (R package version 0.1.0). https://github.com/fmegahed/decisions
-- Megahed, F. M., & Chen, Y.-J. (2026). *decisions Space* (Version 1.0.0) [Web application]. Hugging Face. https://huggingface.co/spaces/fmegahed/decisions
+- Megahed, F. M., & Chen, Y.-J. (2026). *decisions Space* (Version 1.0.1) [Web application]. Hugging Face. https://huggingface.co/spaces/fmegahed/decisions

www/app.js

@@ -103,22 +103,26 @@
   });
 
   // ---- Video dialog (only when the page has one) ---------------------------
+  // Two buttons open it: the one of the intro and the one of the top bar.
   // The embed address is set when the dialog opens and cleared when it
   // closes, so nothing loads before a click and the video stops on close.
-  // Escape closes the dialog; Tab stays in the dialog.
+  // Escape closes the dialog; Tab stays in the dialog. Focus goes back to
+  // the button that opened it (some browsers do not focus a clicked button).
 
   var dialog = byId('video_dialog');
-  var openVideo = byId('open_video');
-  if (dialog && openVideo && dialog.showModal) {
+  var openers = document.querySelectorAll('.open-video');
+  if (dialog && openers.length && dialog.showModal) {
     var frame = byId('video_frame');
     var closeButton = byId('close_video');
     var lastFocused = null;
 
-    openVideo.addEventListener('click', function() {
-      lastFocused = document.activeElement;
-      frame.setAttribute('src', frame.getAttribute('data-src'));
-      dialog.showModal();
-      closeButton.focus();
+    Array.prototype.forEach.call(openers, function(opener) {
+      opener.addEventListener('click', function() {
+        lastFocused = opener;
+        frame.setAttribute('src', frame.getAttribute('data-src'));
+        dialog.showModal();
+        closeButton.focus();
+      });
     });
     closeButton.addEventListener('click', function() { dialog.close(); });
     dialog.addEventListener('click', function(event) {

www/theme.css

@@ -23,7 +23,7 @@
 
 :root {
   --red: #C41230; --tan: #EDECE2; --tan2: #CCC9B8; --tan3: #70685C;
-  --warm: #FAF9F7; --slate: #3E5468; --ink: #1b1b1b; --muted: #5f5a52;
+  --warm: #FAF9F7; --slate: #3E5468; --ink: #1b1b1b; --muted: #5f5a52; --corn: #FDE778;
   --code-bg: #fbfaf7; --code-text: #22262b; --code-c: #5f5a52; --code-f: #3E5468; --code-s: #7a3e00;
   --serif: "Source Serif 4", Georgia, serif;
   --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
@@ -97,11 +97,20 @@ select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .btn:foc
 .chip:has(.shiny-text-output:empty) { visibility: hidden; }
 
 /* Import: a file input that looks like one button */
+/* Its wrappers are flex boxes and its label has no margin (Bootstrap gives
+   labels 5px below): the button then sits on the line of the other controls */
 .import-btn .form-group { margin: 0; width: auto !important; }
 .import-btn .control-label, .import-btn .form-control, .import-btn .progress { display: none; }
-.import-btn .input-group { display: block; }
-.import-btn .input-group-btn { display: inline-block; width: auto; font-size: inherit; }
+.import-btn, .import-btn .form-group, .import-btn .input-group { display: flex; align-items: center; }
+.import-btn .input-group-btn { display: flex; width: auto; margin: 0; font-size: inherit; }
 .import-btn .btn-file { border-radius: 6px !important; }
+/* Every control of the top bar has one height */
+.topbar-right .btn { height: 36px; box-sizing: border-box; }
+
+/* Help video: a red play mark on the quiet button of the top bar */
+.help-video-bar { gap: 8px; }
+.tri { flex: none; width: 0; height: 0; border-left: 8px solid var(--red);
+  border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
 
 /* Samples menu */
 .menu { position: relative; }
@@ -213,6 +222,17 @@ body.is-running .run-row { display: none; }
 .num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
   border-radius: 11px; background: var(--red); color: #fff; font-weight: 700; font-size: 12px; }
 @media (max-width: 899px) { .intro { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
+/* The help video of the intro: Corn Yellow with ink text (about 15:1) and a
+   Dark Tan edge, so it stands apart from the red and black controls */
+.help-video-row { margin-top: 12px; }
+.btn-help-video { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
+  background: var(--corn); border: 1px solid var(--tan3); border-radius: 999px; color: var(--ink);
+  font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.25; text-align: left; cursor: pointer; }
+.btn-help-video:hover { text-decoration: underline; }
+.play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
+  border-radius: 50%; background: var(--red); }
+.play::before { content: ""; margin-left: 3px; border-left: 10px solid #fff;
+  border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
 
 .stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin: 0 0 10px; }
 .stats .v { font-family: var(--serif); font-size: 24px; font-weight: 700; }