improve output formatting

app.py

@@ -35,8 +35,12 @@ terminators = [
 
 @spaces.GPU
 def generate_instruction_response():
-    prompt_info = f"""Generating a user prompt from the LLM via the template \n\n
-    ```{extract_input}```"""
+    prompt_info = f"""### Generating user prompt using the template:
+
+```
+{extract_input}
+```
+"""
     yield prompt_info
     instruction = pipeline(
         extract_input,
@@ -51,9 +55,10 @@ def generate_instruction_response():
         len(extract_input) :
     ].split("\n")[0]
 
-    first_step = "## LLM generated instruction:\n\n" + sanitized_instruction
-    first_step = prompt_info + first_step
-    yield first_step + "\n\n generating LLM response..."
+    first_step = (
+        prompt_info + f"### LLM generated instruction:\n\n{sanitized_instruction}"
+    )
+    yield first_step + "\n\n### Generating LLM response..."
 
     response_template = f"""<|begin_of_text|><|start_header_id|>user<|end_header_id|>\n\n{sanitized_instruction}<|eot_id|><|start_header_id|>assistant<|end_header_id|>\n\n"""
 
@@ -68,14 +73,34 @@ def generate_instruction_response():
 
     assistant_response = response[0]["generated_text"][len(response_template) :]
 
-    yield (first_step + "\n\n## LLM Generated response:\n\n" + assistant_response)
+    final_output = f"""### Template used for generating instruction:
+
+```
+{extract_input}
+```
+
+### LLM Generated Instruction:
+
+{sanitized_instruction}
+
+### Template used for generating response:
+
+```
+{response_template}
+```
+
+### LLM Generated Response:
+
+{assistant_response}
+"""
+    yield final_output
 
 
-title = "Magpie demo"
+title = "Magpie Demo"
 description = """
-This Gradio demo showcases the approach described in the Magpie paper. Magpie is a data synthesis pipeline that creates high-quality alignment data without relying on prompt engineering or seed questions. Instead, it generates instruction data by prompting aligned LLMs with a pre-query template. This method does not prompt the model with a question or starting query. Instead, it uses the model's pre-query template to generate instructions. Essentially, the model is given only the template until a user instruction starts, and then it generates the instruction and the response.
+This Gradio demo showcases the approach described in the Magpie paper. Magpie is a data synthesis pipeline that creates high-quality alignment data without relying on prompt engineering or seed questions. Instead, it generates instruction data by prompting aligned LLMs with a pre-query template.
 
-In this demo, you can see how the model generates a user instruction and a model response.
+In this demo, you can see how the model generates a user instruction and a model response, along with the templates used in the process.
 
 You can learn more about the approach [in the paper](https://huggingface.co/papers/2406.08464).
 """
@@ -83,7 +108,7 @@ You can learn more about the approach [in the paper](https://huggingface.co/pape
 iface = gr.Interface(
     fn=generate_instruction_response,
     inputs=[],
-    outputs=[gr.Markdown("Generated data")],
+    outputs=[gr.Markdown(label="Generated Data")],
     title=title,
     description=description,
     submit_btn="Generate Instructions Response Pair",