Jfrazier/ more cleanup (#43)

Doesn't make sense at the moment to include GIF of app usage.

* chore: improve installation instr, shortcut description, default transcription time to 10 sec

* fix: better venv name

* fix go to section

* grammar

* add windows user instructions for uv section

Author: jfdev001

README.md

@@ -2,21 +2,55 @@
 
 > Train your listening skills by transcribing real speech from YouTube videos.
 
-LinguaLoop is a single-page web application designed to improve language
+`lingua-loop` is a single-page web application designed to improve language
 listening skills through active transcription. It is based on a
 transcription-first learning approach where users repeatedly listen to short
 audio segments and attempt to write down what they've heard.
 
-To run the web application on your computer, you need Python version 3.12
-or higher installed. Then you can do the following (in a virtual environment
-if you want) in a terminal:
+## Installation
+
+To run the web application on your computer, you need Python version 3.12 or
+higher installed. It is recommended to create a dedicated virtual environment
+first before installing `lingua-loop`.
+
+Using conda:
+
+```
+conda create --name lingua-loop python=3.12
+conda activate lingua-loop
+```
+
+Using venv on Windows, if you know your python version is 3.12 or higher,
+open `Command Prompt`:
+
+```
+python -m venv .venv_lingua_loop
+.\.venv_lingua_loop\Scripts\activate
+```
+
+Using venv on Linux/macOS, if you know your python version is 3.12 or higher,
+open a terminal:
+
+```
+python -m venv .venv_lingua_loop
+. .venv_lingua_loop/bin/activate
+```
+
+Then you can install the package:
 
 ```
 pip install git+https://github.com/jfdev001/lingua-loop.git
 ```
 
-You can launch the app, which will automatically open a web browser, by doing
-the following in a terminal:
+For a faster install for users more familiar with Python packages and virtual
+environments, you can use the [uv](https://github.com/astral-sh/uv) package
+manager, go to section [Installation with uv](#installation-with-uv) for details.
+
+
+## Usage
+
+You can launch the app, which will automatically open a web browser, with the
+following command in a terminal:
 
 ```
 lingua-loop
@@ -59,10 +93,9 @@ bug fixes. Please open a GitHub issue if you encounter problems!
 
 # Future Work
 
-
 Some possible extension ideas:
 
-1. Significantly improve the styling.
+1. Significantly improve the styling/UX.
 2. Integrate Anki-style flash cards for selected words. A word should be added
    to a flash card deck in addition to the context in which it occurred (e.g.,
    sentence or phrase). The user *should* write additional context to keep them
@@ -178,6 +211,38 @@ the frontend dependencies with:
 npm install
 ```
 
+# Extras
+
+## Installation with uv
+
+If you do not already have the `uv` package manager installed, you can go to
+Astral's official documentation and follow the [installation
+instructions](https://docs.astral.sh/uv/getting-started/installation/).
+
+If you already have a conda base environment and are okay installing
+`lingua-loop` there with `uv`, do the following:
+
+```
+uv pip install git+https://github.com/jfdev001/lingua-loop.git --system
+```
+
+Otherwise, you can follow whichever `uv` workflow you're comfortable with, but
+for those familiar with `pip`, the following is the easiest (on Linux/macOS):
+
+```
+python -m venv .venv_lingua_loop
+. .venv_lingua_loop/bin/activate
+uv pip install git+https://github.com/jfdev001/lingua-loop.git
+```
+
+For Windows users, you could execute the above commands using `Command Prompt`:
+
+```
+python -m venv .venv_lingua_loop
+.\.venv_lingua_loop\Scripts\activate
+uv pip install git+https://github.com/jfdev001/lingua-loop.git
+```
+
 # References
 
 Below are a series of references, in no particular order, that I used to gain

src/lingua_loop/templates/index.html

@@ -94,7 +94,7 @@ <h1>LinguaLoop</h1>
             <label for="numSecondsOfVideoToTranscribe">From the current time in the video, how many seconds of content
                 do you want to transcribe?</label><br><br>
 
-            <input type="number" id="numSecondsOfVideoToTranscribe" min="5" value="5"
+            <input type="number" id="numSecondsOfVideoToTranscribe" min="5" value="10"
                 style="width: 80px; padding: 6px;" />
         </div>
 
@@ -118,8 +118,8 @@ <h1>LinguaLoop</h1>
             <textarea id="userTextArea" placeholder="Type what you hear..." rows="5" cols="60"></textarea>
             <button id="scoreBtn">Score</button>
             <div id="hintBox" style="margin-top: 8px; color: #666; font-size: 0.8em;">
-                Press <strong>Ctrl + Shift + L</strong> to automatically snap to restart video<br>at the beginning of
-                the segment
+                Press <strong>Ctrl + Shift + L</strong> to automatically snap <br>to the beginning of the transcription
+                segment
             </div>
         </div>