Add option to control line spacing in STET output doc

backend/doc/utils/file_utils.py

@@ -16,7 +16,6 @@
 import yaml
 from doc.config import settings
 
-
 logger = settings.logger(__name__)
 
 # User agent value required by domain host to allow serving
@@ -159,4 +158,7 @@ def docx_filepath(
     output_dir: str = settings.DOCUMENT_OUTPUT_DIR,
 ) -> str:
     """Given document_request_key, return the docx output file path."""
-    return join(output_dir, "{}{}.docx".format(prefix, document_request_key))
+    return join(
+        output_dir,
+        "{}{}.docx".format(prefix, document_request_key),
+    )

backend/stet/domain/document_generator.py

@@ -52,6 +52,7 @@
 def generate_docx_document(
     lang0_code: str,
     lang1_code: str,
+    use_increased_line_spacing: bool,
     document_request_key_: str,
     docx_filepath_: str,
     working_dir: str = settings.WORKING_DIR,
@@ -297,7 +298,9 @@ def generate_docx_document(
             )
         word_entries.append(word_entry)
     current_task.update_state(state="Converting to Docx")
-    generate_docx(word_entries, docx_filepath_, lang0_code, lang1_code)
+    generate_docx(
+        word_entries, docx_filepath_, lang0_code, lang1_code, use_increased_line_spacing
+    )
     return docx_filepath_
 
 
@@ -306,6 +309,7 @@ def generate_docx(
     docx_filepath: str,
     lang0_code: str,
     lang1_code: str,
+    use_increased_line_spacing: bool,
     translated_table_column_headers: dict[
         str, tuple[str, str, str, str]
     ] = TRANSLATED_TABLE_COLUMN_HEADERS,
@@ -319,6 +323,7 @@ def generate_docx(
     :param docx_filepath: The file path where the generated DOCX document will be saved.
     :param lang0_code: Source language code for the document header.
     :param lang1_code: Target language code for the document header.
+    :param use_increased_line_spacing: Indicate whether to increase line spacing to double that of normal.
     """
     doc = Document()
     html_to_docx = HtmlToDocx()
@@ -387,7 +392,10 @@ def generate_docx(
             row_cells = table.add_row().cells
             # Process HTML content in source_text and highlight keyword
             source_paragraph = row_cells[0].paragraphs[0]
-            source_paragraph.paragraph_format.line_spacing = 2.0  # Adjust line spacing
+            if use_increased_line_spacing:
+                source_paragraph.paragraph_format.line_spacing = (
+                    2.0  # Adjust line spacing
+                )
             if verse.source_has_preformatted_bolding:
                 add_preformatted_html_to_docx(verse.source_text, source_paragraph)
             elif len(word_entry.bolded_phrases) > 0:
@@ -400,7 +408,10 @@ def generate_docx(
                 )
             # Add target_text with wider line spacing
             target_paragraph = row_cells[1].paragraphs[0]
-            target_paragraph.paragraph_format.line_spacing = 2.0  # Adjust line spacing
+            if use_increased_line_spacing:
+                target_paragraph.paragraph_format.line_spacing = (
+                    2.0  # Adjust line spacing
+                )
             add_plain_html_to_docx(verse.target_text, target_paragraph)
             # Vertically centered Unicode checkbox
             checkbox_cell = row_cells[2]
@@ -426,23 +437,32 @@ def generate_docx(
     reduce_spacing_around_tables(doc)
     doc.save(docx_filepath)
 
+
 @worker.app.task
 def generate_stet_docx_document(
     lang0_code: str,
     lang1_code: str,
     email_address: str,
+    use_increased_line_spacing: bool,
 ) -> Json[str]:
     logger.debug(
         "passed args: lang0_code: %s, lang1_code: %s, email_adress: %s",
         lang0_code,
         lang1_code,
         email_address,
+        use_increased_line_spacing,
+    )
+    document_request_key_ = (
+        f"{lang0_code}_{lang1_code}_{'2l' if use_increased_line_spacing else '1l'}_stet"
     )
-    document_request_key_ = f"{lang0_code}_{lang1_code}_stet"
     docx_filepath_ = docx_filepath(document_request_key_)
     if file_needs_update(docx_filepath_):
         generate_docx_document(
-            lang0_code, lang1_code, document_request_key_, docx_filepath_
+            lang0_code,
+            lang1_code,
+            use_increased_line_spacing,
+            document_request_key_,
+            docx_filepath_,
         )
         if should_send_email(email_address):
             attachments = [

backend/stet/domain/model.py

@@ -12,7 +12,9 @@ class VerseEntry(NamedTuple):
     target_text: str
     occurrence_index: int = 0  # 1, 2, 3, ...
     occurrence_total: int = 0  # e.g. 3
-    source_has_preformatted_bolding: bool = False  # True when source came from <r><v> format
+    source_has_preformatted_bolding: bool = (
+        False  # True when source came from <r><v> format
+    )
 
 
 @final
@@ -54,4 +56,5 @@ class StetDocumentRequest(BaseModel):
     lang0_code: str
     # The target language
     lang1_code: str
+    use_increased_line_spacing: bool
     email_address: Optional[EmailStr]

backend/stet/entrypoints/routes.py

@@ -93,6 +93,7 @@ async def generate_docx_document(
                 stet_document_request.lang0_code,
                 stet_document_request.lang1_code,
                 stet_document_request.email_address,
+                stet_document_request.use_increased_line_spacing,
             )
         )
     except HTTPException as exc:

frontend/src/lib/stet/Switch.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { settingsUpdatedStore } from '$lib/stet/stores/SettingsStore'
+  import { errorStore } from '$lib/stet/stores/NotificationStore'
+  export let id = ''
+  export let checked = false
+  export let disabled = false
+</script>
+
+<label for={id}>
+  <div class="switch">
+    <input
+      {id}
+      name={id}
+      type="checkbox"
+      class="sr-only"
+      {disabled}
+      bind:checked
+      on:change={() => {
+        $settingsUpdatedStore = true
+        $errorStore = ''
+      }}
+    />
+    <div class="track" />
+    <div class="thumb" />
+  </div>
+</label>
+
+<style global lang="postcss">
+  .switch {
+    @apply relative inline-block align-middle cursor-pointer select-none bg-transparent;
+  }
+  .track {
+    @apply w-11 h-7 bg-white border border-[#343434] rounded-full shadow-inner;
+  }
+  .thumb {
+    @apply transition-all duration-300 ease-in-out absolute top-1 left-1 w-5 h-5 bg-[#343434] rounded-full;
+  }
+  input[type='checkbox']:checked ~ .thumb {
+    @apply transform translate-x-4;
+  }
+  input[type='checkbox']:checked ~ .track {
+    @apply transform transition-colors;
+    background:
+      linear-gradient(180deg, #1876fd 0%, #015ad9 100%), linear-gradient(0deg, #343434, #343434);
+  }
+  input[type='checkbox']:disabled ~ .track {
+    @apply bg-gray-500;
+  }
+  input[type='checkbox']:disabled ~ .thumb {
+    @apply bg-gray-100 border-gray-500;
+  }
+  input[type='checkbox']:focus + .track,
+  input[type='checkbox']:active + .track {
+    @apply outline outline-2;
+  }
+</style>

frontend/src/lib/stet/stores/SettingsStore.ts

@@ -17,3 +17,4 @@ export let emailStore: Writable<string | null> = writable<string | null>(null)
 export let documentRequestKeyStore: Writable<string> = writable<string>('')
 export let settingsUpdatedStore: Writable<boolean> = writable<boolean>(false)
 // export let twResourceRequestedStore: Writable<boolean> = writable<boolean>(false)
+export let useIncreasedLineSpacingStore: Writable<boolean> = writable<boolean>(false)

frontend/src/routes/stet/settings/+page.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
+  import Switch from '$lib/stet/Switch.svelte'
   import WizardBreadcrumb from '$lib/stet/WizardBreadcrumb.svelte'
   import WizardBasket from '$lib/stet/WizardBasket.svelte'
   import WizardBasketModal from '$lib/WizardBasketModal.svelte'
-  import { emailStore, documentRequestKeyStore } from '$lib/stet/stores/SettingsStore'
+  import {
+    emailStore,
+    documentRequestKeyStore,
+    settingsUpdatedStore,
+    useIncreasedLineSpacingStore
+  } from '$lib/stet/stores/SettingsStore'
   import { documentReadyStore, errorStore } from '$lib/stet/stores/NotificationStore'
   import { langCountStore } from '$lib/stet/stores/LanguagesStore'
   import GenerateDocument from './GenerateDocument.svelte'
@@ -38,7 +44,6 @@
     <h3 class="mb-4 bg-white text-4xl font-normal leading-[48px] text-[#33445C]">
       Generate document
     </h3>
-
     <!-- mobile basket modal launcher -->
     <div class="mr-4 text-right sm:hidden">
       <button on:click={() => (showWizardBasketModal = true)}>
@@ -60,6 +65,16 @@
     </div>
     <!-- main content -->
     <main class="flex-1 overflow-y-auto p-4">
+      <h3 class="mb-2 mt-2 text-2xl text-[#33445C]">Optional Settings</h3>
+      <div class="ml-4">
+        <div class="mb-2 mt-6 flex">
+          <Switch bind:checked={$useIncreasedLineSpacingStore} id="use-increased-line-spacing" />
+          <span class="ml-2 text-xl text-[#33445C]"
+            >Increase line spacing to double so that there is space to write between lines</span
+          >
+        </div>
+      </div>
+
       <h3 class="mb-2 mt-4 text-2xl text-[#33445C]">Notification</h3>
       <div class="ml-4">
         {#if !$documentReadyStore}

frontend/src/routes/stet/settings/GenerateDocument.svelte

@@ -9,13 +9,10 @@
     langCountStore
   } from '$lib/stet/stores/LanguagesStore'
   import {
-    // docTypeStore,
-    // generatePdfStore,
-    // generateEpubStore,
-    // generateDocxStore,
     emailStore,
     documentRequestKeyStore,
-    settingsUpdatedStore
+    settingsUpdatedStore,
+    useIncreasedLineSpacingStore
   } from '$lib/stet/stores/SettingsStore'
   import { taskIdStore, taskStateStore } from '$lib/stet/stores/TaskStore'
   import { getCode } from '$lib/stet/utils'
@@ -50,16 +47,14 @@
     let documentRequest = {
       lang0_code: getCode($lang0CodeAndNameStore),
       lang1_code: getCode($lang1CodeAndNameStore),
-      email_address: $emailStore
+      email_address: $emailStore,
+      use_increased_line_spacing: $useIncreasedLineSpacingStore
     }
     console.log('document request: ', JSON.stringify(documentRequest, null, 2))
     $errorStore = null
     $documentReadyStore = false
     $documentRequestKeyStore = ''
     let endpointUrl = `${apiRootUrl}/stet/documents_docx`
-    // if ($generateDocxStore) {
-    //   endpointUrl = `${apiRootUrl}/documents_docx`
-    // }
     const response = await fetch(endpointUrl, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -122,37 +117,8 @@
     }
   }
 
-  // Reactively set/store document output type flags
-  // $: {
-  //   if ($docTypeStore === 'pdf') {
-  //     $generatePdfStore = true
-  //     $generateEpubStore = false
-  //     $generateDocxStore = false
-  //   } else if ($docTypeStore === 'epub') {
-  //     $generatePdfStore = false
-  //     $generateEpubStore = true
-  //     $generateDocxStore = false
-  //   } else if ($docTypeStore === 'docx') {
-  //     $generatePdfStore = false
-  //     $generateEpubStore = false
-  //     $generateDocxStore = true
-  //   }
-  // }
-
-  // Reactively set download URLs of generated documents
-  // let pdfDownloadUrl: string
-  // $: pdfDownloadUrl = `${fileServerUrl}/${$documentRequestKeyStore}.pdf`
-  // let ePubDownloadUrl: string
-  // $: ePubDownloadUrl = `${fileServerUrl}/${$documentRequestKeyStore}.epub`
   let docxDownloadUrl: string
   $: docxDownloadUrl = `${fileServerUrl}/${$documentRequestKeyStore}.docx`
-  let htmlDownloadUrl: string
-  $: htmlDownloadUrl = `${fileServerUrl}/${$documentRequestKeyStore}.html`
-
-  function viewFromUrl(url: string) {
-    console.log(`url: ${url}`)
-    window.open(url, '_blank')
-  }
 
   // Warn user when they attempt to reload page or close tab
   window.addEventListener('beforeunload', (event) => {
@@ -201,17 +167,6 @@
           <div class="blue-gradient-bar h-1" style="width: 100%" />
         </div>
         <div class="m-auto"><h3 class="text-xl text-[#82A93F]">Complete!</h3></div>
-        <!-- {#if $generatePdfStore} -->
-        <!--   <div class="m-auto mt-4"> -->
-        <!--     <DownloadButton buttonText="Download PDF" url={pdfDownloadUrl} /> -->
-        <!--   </div> -->
-        <!-- {/if} -->
-        <!-- {#if $generateEpubStore} -->
-        <!--   <div class="m-auto mt-4"> -->
-        <!--     <DownloadButton buttonText="Download ePub" url={ePubDownloadUrl} /> -->
-        <!--   </div> -->
-        <!-- {/if} -->
-        <!-- {#if $generateDocxStore} -->
         <div class="m-auto mt-4">
           <DownloadButton buttonText="Download Docx" url={docxDownloadUrl} />
         </div>
@@ -233,31 +188,6 @@
             highlighted text to the appropriate installed font in Word, then save the Word document.
           </p>
         </div>
-        <!-- {/if} -->
-        <!-- {#if !$generateDocxStore} -->
-        <!--   <div class="mt-4 pb-4"> -->
-        <!--     <button -->
-        <!--       class="gray-gradient hover:gray-gradient-hover w-1/2 rounded-md border-2 border-[#e5e8eb] p-4 text-center" -->
-        <!--       on:click={() => viewFromUrl(htmlDownloadUrl)} -->
-        <!--     > -->
-        <!--       <svg -->
-        <!--         class="m-auto" -->
-        <!--         width="23" -->
-        <!--         height="16" -->
-        <!--         viewBox="0 0 23 16" -->
-        <!--         fill="none" -->
-        <!--         xmlns="http://www.w3.org/2000/svg" -->
-        <!--       > -->
-        <!--         <path -->
-        <!--           d="M11.5 0.5C6.5 0.5 2.23 3.61 0.5 8C2.23 12.39 6.5 15.5 11.5 15.5C16.5 15.5 20.77 12.39 22.5 8C20.77 3.61 16.5 0.5 11.5 0.5ZM11.5 13C8.74 13 6.5 10.76 6.5 8C6.5 5.24 8.74 3 11.5 3C14.26 3 16.5 5.24 16.5 8C16.5 10.76 14.26 13 11.5 13ZM11.5 5C9.84 5 8.5 6.34 8.5 8C8.5 9.66 9.84 11 11.5 11C13.16 11 14.5 9.66 14.5 8C14.5 6.34 13.16 5 11.5 5Z" -->
-        <!--           fill="#1A130B" -->
-        <!--           fill-opacity="0.8" -->
-        <!--         /> -->
-        <!--       </svg> -->
-        <!--       <span class="p-4 text-xl">View HTML Online</span> -->
-        <!--     </button> -->
-        <!--   </div> -->
-        <!-- {/if} -->
       </div>
     {:else}
       <button

frontend/tests/e2e/stet_test.ts

@@ -123,3 +123,20 @@ test.describe('Desktop Tests', () => {
     await expect(page.getByText('Tok Pisin')).not.toBeVisible({ timeout: 64_000 })
   })
 })
+
+test('test line spacing option', async ({ page }) => {
+  await page.goto('http://localhost:8001/stet')
+  await page.getByLabel('Tiếng Việt (Vietnamese) vi').check()
+  await page.getByRole('button', { name: 'Next' }).click()
+  await page.getByText('Cebuano').click()
+  await page.getByRole('button', { name: 'Next' }).click()
+  await page.getByRole('button', { name: 'Generate File' }).click()
+  await page.getByRole('link', { name: 'Target Language' }).click()
+  await page.getByRole('button', { name: 'Next' }).click()
+  await expect(page.getByRole('main')).toContainText('Increase line spacing to')
+  await expect(page.getByRole('main')).toContainText('Generate File')
+  await page.getByRole('button', { name: 'Generate File' }).click()
+  await expect(page.getByRole('main')).toContainText('Download')
+  await page.locator('.thumb').click()
+  await page.getByRole('button', { name: 'Generate File' }).click()
+})