Update pages/Data Collection.py

pages/Data Collection.py

@@ -314,6 +314,31 @@ elif st.session_state.current_page == "explore_images_video":
             </p>
         </div>
     """, unsafe_allow_html=True)
+    # Visualization for Grid-Like Structure
+    st.markdown("<h4 style='color: #BB3385;'>Image as a Grid Structure</h4>", unsafe_allow_html=True)
+    height, width = 6, 6
+    grid = np.random.rand(height, width)
+    fig, ax = plt.subplots()
+    cax = ax.imshow(grid, cmap='viridis')
+
+    # Annotate the grid with pixel labels
+    for i in range(height):
+        for j in range(width):
+            ax.text(j, i, f'{grid[i, j]:.2f}', ha='center', va='center', color='white', fontsize=6)
+
+    # Set axis labels and title
+    ax.set_title("Image as a Grid-Like Structure", fontsize=12)
+    ax.set_xlabel("Width (Pixels)", fontsize=10)
+    ax.set_ylabel("Height (Pixels)", fontsize=10)
+    ax.set_xticks(range(width))
+    ax.set_yticks(range(height))
+    ax.set_xticklabels([f'Col {j+1}' for j in range(width)])
+    ax.set_yticklabels([f'Row {i+1}' for i in range(height)])
+    ax.grid(color='white', linestyle='-', linewidth=1)
+    fig.colorbar(cax, ax=ax, orientation='vertical', label='Pixel Value')
+
+    st.pyplot(fig)
+
 
     # Go Back Button
     if st.button("Go Back"):