complete part cable

css/app.css

@@ -161,7 +161,52 @@
       margin: 0 auto;
   }
 
-pre.codegen {
-  max-height: 300px;
-  overflow-y: scroll;
+
+  .vertical-nav {
+    position: fixed;
+    top: 100px;
+    left: 0;
+    width: 350px;
+    background-color: transparent; /* 设置为透明背景 */
+    padding: 10px;
+    box-shadow: none; /* 移除阴影 */
+    z-index: 1000;
+    height: auto;
+    overflow-y: auto;
+}
+
+.vertical-nav .nav-link {
+    color: #007bff;
+    padding: 5px 10px;
+    text-decoration: none;
+    display: block;
+    transition: background-color 0.3s;
+}
+
+.vertical-nav .nav-link:hover {
+    background-color: rgba(226, 230, 234, 0.5); /* 轻微的半透明悬停背景 */
+    color: #0056b3;
+}
+
+.vertical-nav .nav-item {
+    margin-bottom: 10px;
+}
+
+/* 一级菜单：Cable，字体最大 */
+.vertical-nav .nav > .nav-item > .nav-link {
+    font-size: 20px;  /* 顶级菜单字体大小 */
+    font-weight: bold;
+}
+
+/* 二级菜单：Experiments等，字体较大 */
+.vertical-nav .nav > .nav-item > .nav .nav-link {
+    font-size: 18px;  /* 第二级菜单字体大小 */
+    padding-left: 15px;  /* 缩进 */
+    font-weight: bold;
+}
+
+/* 三级菜单：Pre-processing等，字体较小 */
+.vertical-nav .nav > .nav-item > .nav > .nav-item > .nav-link {
+    font-size: 16px;  /* 第三级菜单字体大小 */
+    padding-left: 30px;  /* 更大的缩进 */
 }

css/prompt.css

@@ -60,5 +60,5 @@
 .btn:hover {
     opacity: 0.8;
 }
-
+  
 

css/style_experiments.css

@@ -40,12 +40,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-left: 20px;
-    margin-right: 20px;
-    padding: 10px;
-    width: 100px;
-    height: 40px;
-    font-size: 16px;
+    margin-left: 12px;
+    margin-right: 12px;
+    padding: 8px;
+    width: 60px;
+    height: 25px;
+    font-size: 12px;
     text-align: center;
     box-sizing: border-box;
     border: 2px solid #000; /* 添加黑色边框 */
@@ -56,11 +56,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100px;
-    height: 40px;
-    font-size: 16px;
-    margin: 0;
-    padding: 10px;
+    margin-left: 12px;
+    margin-right: 12px;
+    padding: 8px;
+    width: 60px;
+    height: 25px;
+    font-size: 12px;
     text-align: center;
     box-sizing: border-box;
     border: 2px solid #000; /* 添加黑色边框 */
@@ -98,3 +99,16 @@
 .toggle-title.open::before {
     content: "\25BC"; /* Down-pointing triangle (open state) */
 }
+
+
+/* styles.css */
+pre {
+    background-color: #f8f9fa;
+    overflow: visible;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+code {
+    background-color: inherit;
+}

css/style_skill_reasoning.css

@@ -0,0 +1,31 @@
+.btn img {
+    width: 500px;
+    height: 350px;
+    opacity: 0.4; /* 未选中时变灰 */
+    transition: opacity 0.5s;
+}
+
+.btn.active img {
+    opacity: 1; /* 选中时恢复颜色 */
+}
+
+.show-btn-active img {
+    opacity: 1; /* 选中时恢复颜色 */
+}
+
+.btn img:hover {
+    opacity: 1.0; /* 鼠标悬停时强调效果 */
+}
+
+.btn {
+    cursor: pointer;
+}
+
+/* 设置button-container为flexbox布局，图片水平排列 */
+.button-container {
+    display: flex;
+    justify-content: center; /* 居中排列 */
+    gap: 500px; /* 图片之间的间距 */
+    margin-top: 150px;
+    margin-bottom: 150px; /* 底部增加些空隙 */
+}

examples/condition_reasoning/LLM_response_cable_1.js

@@ -0,0 +1,66 @@
+// Define the task description as a JavaScript string
+var LLM_response_condition_cable_1 = `
+from robot_controller import Controller
+from perception import Perception
+
+robot_controller = Controller()
+perception = Perception()
+
+def is_at(pose):
+    # post-condition to check if the object is at the specified pose
+    pass
+
+def is_grasped():
+    # post-condition to check if the object is grasped
+    pass
+
+def is_released():
+    # post-condition to check if the object is released
+    pass
+
+def is_inserted(env_object):
+    # post-condition to check if the cable is inserted into the env_object
+    pass
+
+def is_stretched():
+    # post-condition to check if the cable is stretched
+    pass
+
+class ObjectSkillLibrary:
+    # Skill library for manipulating any object
+    def __init__(self, target_object):
+        # target_object is the object which the robot hand directly manipulates, such as a cable or a screw
+        self.target_object = target_object
+        # env_object are contextual objects in the environment that target_object interacts with, such as a screw holder
+
+    def move_object(self, pose):
+        print(f"Moving {self.target_object} to {pose}")
+        robot_controller.move_cart_pose(pose, success_condition=lambda: is_at(pose))
+
+    def grasp(self):
+        print(f"Moving to grasp the {self.target_object} with two fingers")
+        robot_controller.move_cart_pose(self.target_object, success_condition=is_grasped)
+        robot_controller.grasp()
+
+    def release(self):
+        print(f"Opening the hand of the robot to release the {self.target_object}")
+        robot_controller.open_gripper(success_condition=is_released)
+
+
+class CableSkillLibrary(ObjectSkillLibrary):
+    # Skill library for manipulating cable
+    def __init__(self):
+        super().__init__("cable")
+        
+    def insert(self, direction, env_object):
+        print(f"Inserting the {self.target_object} in {direction} into {env_object} and then loses contact")
+        robot_controller.insert(direction, env_object, success_condition=lambda: is_inserted(env_object))
+        
+    def stretch(self):
+        print(f"Stretching the {self.target_object} linearly in opposite directions")
+        robot_controller.stretch(success_condition=is_stretched)
+`;
+
+// Insert the task description into the user-request-cable-container element
+document.getElementById('LLM-response-condition-cable-1-container').innerHTML = 
+  '<pre style="background-color: #f8f9fa; overflow: visible; white-space: pre-wrap; word-wrap: break-word;" style="background-color: #f8f9fa; overflow: visible; white-space: pre-wrap; word-wrap: break-word;"><code class="language-python">' + Prism.highlight(LLM_response_condition_cable_1.trim(), Prism.languages.python, 'python') + '</code></pre>';

examples/condition_reasoning/LLM_response_cable_2.js

@@ -0,0 +1,69 @@
+// Define the task description as a JavaScript string
+var LLM_response_condition_cable_2 = `
+from robot_controller import Controller
+from perception import Perception
+
+robot_controller = Controller()
+perception = Perception()
+
+def is_at(pose, threshold=0.01):
+    # post-condition to check if the object is at the specified pose
+    current_pose = perception.get_robot_hand_pose()
+    return np.linalg.norm(np.array(current_pose) - np.array(pose)) < threshold
+
+def is_grasped():
+    # post-condition to check if the object is grasped
+    return perception.get_grasping_status()
+
+def is_released():
+    # post-condition to check if the object is released
+    return not perception.get_grasping_status()
+
+def is_inserted(env_object, force_threshold=5.0):
+    # post-condition to check if the cable is inserted into the env_object
+    resistance_force = perception.get_resistance_force()
+    return resistance_force > force_threshold
+
+def is_stretched(force_threshold=10.0):
+    # post-condition to check if the cable is stretched
+    resistance_force = perception.get_resistance_force()
+    return resistance_force > force_threshold
+
+class ObjectSkillLibrary:
+    # Skill library for manipulating any object
+    def __init__(self, target_object):
+        # target_object is the object which the robot hand directly manipulates, such as a cable or a screw
+        self.target_object = target_object
+        # env_object are contextual objects in the environment that target_object interacts with, such as a screw holder
+
+    def move_object(self, pose):
+        print(f"Moving {self.target_object} to {pose}")
+        robot_controller.move_cart_pose(pose, success_condition=lambda: is_at(pose))
+
+    def grasp(self):
+        print(f"Moving to grasp the {self.target_object} with two fingers")
+        robot_controller.move_cart_pose(self.target_object, success_condition=is_grasped)
+        robot_controller.grasp()
+
+    def release(self):
+        print(f"Opening the hand of the robot to release the {self.target_object}")
+        robot_controller.open_gripper(success_condition=is_released)
+
+
+class CableSkillLibrary(ObjectSkillLibrary):
+    # Skill library for manipulating cable
+    def __init__(self):
+        super().__init__("cable")
+        
+    def insert(self, direction, env_object):
+        print(f"Inserting the {self.target_object} in {direction} into {env_object} and then loses contact")
+        robot_controller.insert(direction, env_object, success_condition=lambda: is_inserted(env_object))
+        
+    def stretch(self):
+        print(f"Stretching the {self.target_object} linearly in opposite directions")
+        robot_controller.stretch(success_condition=is_stretched)
+`;
+
+// Insert the task description into the user-request-cable-container element
+document.getElementById('LLM-response-condition-cable-2-container').innerHTML = 
+  '<pre style="background-color: #f8f9fa; overflow: visible; white-space: pre-wrap; word-wrap: break-word;" style="background-color: #f8f9fa; overflow: visible; white-space: pre-wrap; word-wrap: break-word;"><code class="language-python">' + Prism.highlight(LLM_response_condition_cable_2.trim(), Prism.languages.python, 'python') + '</code></pre>';

examples/condition_reasoning/LLM_response_cable_3.js

@@ -0,0 +1,75 @@
+// Define the task description as a JavaScript string
+var LLM_response_condition_cable_3_description = `
+Based on the plot, the resistance force during the "stretch" skill execution is consistently around 10 N. Therefore, we can set the threshold for the success condition is_stretched to a value slightly below 10 N to ensure that the skill is considered successful when the resistance force reaches this level.
+
+Here is the updated implementation of the is_stretched function:
+`;
+
+var LLM_response_condition_cable_3_code = `
+from robot_controller import Controller
+from perception import Perception
+
+robot_controller = Controller()
+perception = Perception()
+
+def is_at(pose, threshold=0.01):
+    # post-condition to check if the object is at the specified pose
+    current_pose = perception.get_robot_hand_pose()
+    return np.linalg.norm(np.array(current_pose) - np.array(pose)) < threshold
+
+def is_grasped():
+    # post-condition to check if the object is grasped
+    return perception.get_grasping_status()
+
+def is_released():
+    # post-condition to check if the object is released
+    return not perception.get_grasping_status()
+
+def is_inserted(direction, env_object, force_threshold=5.0):
+    # post-condition to check if the object is inserted in the specified direction into the environment object
+    resistance_force = perception.get_resistance_force()
+    return resistance_force > force_threshold
+
+def is_stretched(force_threshold=9.0):
+    # post-condition to check if the object is stretched
+    resistance_force = perception.get_resistance_force()
+    return resistance_force > force_threshold
+
+class ObjectSkillLibrary:
+    # Skill library for manipulating any object
+    def __init__(self, target_object):
+        # target_object is the object which the robot hand directly manipulates, such as a cable or a screw
+        self.target_object = target_object
+        # env_object are contextual objects in the environment that target_object interacts with, such as a screw holder
+
+    def move_object(self, pose):
+        print(f"Moving {self.target_object} to {pose}")
+        robot_controller.move_cart_pose(pose, success_condition=lambda: is_at(pose))
+
+    def grasp(self):
+        print(f"Moving to grasp the {self.target_object} with two fingers")
+        robot_controller.move_cart_pose(self.target_object, success_condition=is_grasped)
+        robot_controller.grasp()
+
+    def release(self):
+        print(f"Opening the hand of the robot to release the {self.target_object}")
+        robot_controller.open_gripper(success_condition=is_released)
+
+class CableSkillLibrary(ObjectSkillLibrary):
+    # Skill library for manipulating cable
+    def __init__(self):
+        super().__init__("cable")
+        
+    def insert(self, direction, env_object):
+        print(f"Inserting the {self.target_object} in {direction} into {env_object} and then loses contact")
+        robot_controller.insert(direction, env_object, success_condition=lambda: is_inserted(direction, env_object))
+        
+    def stretch(self):
+        print(f"Stretching the {self.target_object} linearly in opposite directions")
+        robot_controller.stretch(success_condition=lambda: is_stretched(force_threshold=9.0))
+`;
+
+// Insert the description and code separately into the container
+document.getElementById('LLM-response-condition-cable-3-container').innerHTML = 
+  LLM_response_condition_cable_3_description + 
+  '<pre style="background-color: #f8f9fa; overflow: visible; white-space: pre-wrap; word-wrap: break-word;" style="background-color: #f8f9fa; overflow: visible; white-space: pre-wrap; word-wrap: break-word;"><code class="language-python">' + Prism.highlight(LLM_response_condition_cable_3_code.trim(), Prism.languages.python, 'python') + '</code></pre>';