new option to add text instructions

Author: cyclotruc

templates/index.jinja

@@ -110,7 +110,7 @@
         <div class="relative mb-8">
             <div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
             <div class="rounded-xl relative z-20 p-8 border-[3px] border-gray-900 bg-[#E6F2FF]">
-                <form method="post" class="flex flex-col md:flex-row gap-4">
+                <form method="post" class="flex flex-col md:flex-row gap-4" onsubmit="prepareFormSubmit(event)">
                     <div class="relative flex-1">
                         <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
                         <input 
@@ -132,20 +132,49 @@
                             Generate Dockerfile
                         </button>
                     </div>
+                    <input type="hidden" name="additional_instructions_hidden" id="additional_instructions_hidden" value="">
                 </form>
 
-                <!-- Example repositories section -->
-                <div class="mt-6">
-                    <p class="text-gray-700 mb-3 font-medium">Try these example repositories:</p>
-                    <div class="flex flex-wrap gap-2">
-                        <button onclick="submitExample('https://github.com/cyclotruc/gitingest')"
-                                class="px-4 py-2 bg-[#E6F2FF] hover:bg-[#5A9BF5] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px text-sm font-medium">
-                            Gitingest
-                        </button>
-                        <button onclick="submitExample('https://github.com/cyclotruc/gitcontainer')"
-                                class="px-4 py-2 bg-[#E6F2FF] hover:bg-[#5A9BF5] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px text-sm font-medium">
-                            Gitcontainer
-                        </button>
+                <!-- Examples and Additional instructions row -->
+                <div class="mt-6 flex flex-col md:flex-row md:justify-between md:items-start gap-4">
+                    <!-- Example repositories section -->
+                    <div class="flex-1">
+                        <p class="text-gray-700 mb-3 font-medium">Try these example repositories:</p>
+                        <div class="flex flex-wrap gap-2">
+                            <button onclick="submitExample('https://github.com/cyclotruc/gitingest')"
+                                    class="px-4 py-2 bg-[#E6F2FF] hover:bg-[#5A9BF5] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px text-sm font-medium">
+                                Gitingest
+                            </button>
+                            <button onclick="submitExample('https://github.com/cyclotruc/gitcontainer')"
+                                    class="px-4 py-2 bg-[#E6F2FF] hover:bg-[#5A9BF5] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px text-sm font-medium">
+                                Gitcontainer
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Additional instructions checkbox -->
+                    <div class="flex-shrink-0 self-start md:self-center">
+                        <div class="flex items-center">
+                            <input type="checkbox" 
+                                   id="show_instructions" 
+                                   onchange="toggleInstructions()"
+                                   class="w-4 h-4 text-[#5A9BF5] bg-gray-100 border-gray-300 rounded focus:ring-[#5A9BF5] focus:ring-2">
+                            <label for="show_instructions" class="ml-2 text-gray-700 font-medium">Additional instructions</label>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Additional instructions textarea (spans full width) -->
+                <div id="instructions_container" class="hidden mt-4">
+                    <div class="relative">
+                        <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
+                        <textarea 
+                            id="additional_instructions"
+                            name="additional_instructions"
+                            placeholder="e.g., Use Alpine Linux, include specific tools, optimize for production, etc."
+                            rows="3"
+                            class="border-[3px] w-full relative z-20 border-gray-900 placeholder-gray-600 text-sm font-medium focus:outline-none py-3 px-4 rounded resize-none"
+                        ></textarea>
                     </div>
                 </div>
             </div>
@@ -349,6 +378,38 @@
             // input.form.submit();
         }
 
+        // Toggle additional instructions visibility
+        function toggleInstructions() {
+            const checkbox = document.getElementById('show_instructions');
+            const container = document.getElementById('instructions_container');
+            
+            if (checkbox.checked) {
+                container.classList.remove('hidden');
+                container.classList.add('block');
+            } else {
+                container.classList.add('hidden');
+                container.classList.remove('block');
+                // Clear the textarea when hiding
+                document.getElementById('additional_instructions').value = '';
+            }
+        }
+
+        // Prepare form submission by copying additional instructions to hidden input
+        function prepareFormSubmit(event) {
+            const checkbox = document.getElementById('show_instructions');
+            const instructionsTextarea = document.getElementById('additional_instructions');
+            const hiddenInput = document.getElementById('additional_instructions_hidden');
+            
+            if (checkbox.checked && instructionsTextarea.value.trim()) {
+                hiddenInput.value = instructionsTextarea.value.trim();
+            } else {
+                hiddenInput.value = '';
+            }
+            
+            // Allow form to submit normally
+            return true;
+        }
+
         // Monaco Editor setup
         let dockerfileEditor = null;
         let composeEditor = null;

tools/create_container.py

@@ -15,6 +15,7 @@ async def create_container_tool(
     gitingest_tree: str,
     gitingest_content: str,
     project_name: Optional[str] = None,
+    additional_instructions: Optional[str] = None,
     max_context_chars: int = 50000,  # Limit to stay within context window
     websocket: Optional[Any] = None  # WebSocket connection for streaming
 ) -> Dict[str, Any]:
@@ -26,6 +27,7 @@ async def create_container_tool(
         gitingest_tree (str): Directory tree from gitingest
         gitingest_content (str): Full content from gitingest
         project_name (str, optional): Name of the project for the container
+        additional_instructions (str, optional): Additional instructions for the Dockerfile generation
         max_context_chars (int): Maximum characters to send in context
         websocket (Any, optional): WebSocket connection for streaming
         
@@ -46,6 +48,10 @@ async def create_container_tool(
             truncated_content = gitingest_content[:max_context_chars] + "\n\n... [Content truncated due to length] ..."
 
         # Create the prompt for Dockerfile generation
+        additional_instructions_section = ""
+        if additional_instructions and additional_instructions.strip():
+            additional_instructions_section = f"\n\nADDITIONAL INSTRUCTIONS:\n{additional_instructions.strip()}"
+        
         prompt = f"""Based on the following repository analysis, generate a comprehensive and production-ready Dockerfile.
 
 PROJECT SUMMARY:
@@ -55,7 +61,7 @@ async def create_container_tool(
 {gitingest_tree}
 
 SOURCE CODE CONTEXT:
-{truncated_content}
+{truncated_content}{additional_instructions_section}
 
 Please generate a Dockerfile that:
 1. Uses appropriate base images for the detected technology stack
@@ -214,6 +220,7 @@ def run_create_container(
     gitingest_tree: str,
     gitingest_content: str,
     project_name: Optional[str] = None,
+    additional_instructions: Optional[str] = None,
     websocket: Optional[Any] = None
 ) -> Dict[str, Any]:
     """
@@ -224,13 +231,14 @@ def run_create_container(
         gitingest_tree (str): Directory tree from gitingest
         gitingest_content (str): Full content from gitingest
         project_name (str, optional): Name of the project
+        additional_instructions (str, optional): Additional instructions for Dockerfile generation
         websocket (Any, optional): WebSocket connection for streaming
         
     Returns:
         Dict[str, Any]: Dictionary containing generated Dockerfile and metadata
     """
     return asyncio.run(create_container_tool(
-        gitingest_summary, gitingest_tree, gitingest_content, project_name, websocket=websocket
+        gitingest_summary, gitingest_tree, gitingest_content, project_name, additional_instructions, websocket=websocket
     ))
 
 
@@ -258,6 +266,10 @@ def run_create_container(
                 "project_name": {
                     "type": "string",
                     "description": "Optional name for the project/container"
+                },
+                "additional_instructions": {
+                    "type": "string",
+                    "description": "Optional additional instructions for customizing the Dockerfile generation"
                 }
             },
             "required": ["gitingest_summary", "gitingest_tree", "gitingest_content"]