Add image processing and visualization features

- Implemented a script to generate test images for AI productivity trends, tools usage, and time savings.
- Added new markdown documentation for visualizing data with GitHub Copilot.
- Enhanced ContentLoader to process and upload images to Azure Blob Storage.
- Created ImageUploadHelper for handling image uploads and metadata management.
- Introduced IImageService interface and ImageService implementation for image management.
- Added custom Markdown extension for rewriting image URLs in content.
- Updated various models and services to support image handling and metadata storage.
- Included necessary NuGet packages for Azure Blob Storage and ImageSharp.

Author: csharpfritz

Content/Tips/images/generate_test_images.py

@@ -0,0 +1,67 @@
+import matplotlib.pyplot as plt
+import numpy as np
+import seaborn as sns
+from pathlib import Path
+
+# Create images directory if it doesn't exist
+images_dir = Path(__file__).parent
+images_dir.mkdir(exist_ok=True)
+
+# Set style
+plt.style.use('seaborn-v0_8')
+sns.set_theme()
+sns.set_palette("husl")
+
+# 1. Create a sample line plot showing "AI Productivity over time"
+def create_productivity_chart():
+    plt.figure(figsize=(10, 6))
+    x = np.array([2020, 2021, 2022, 2023, 2024, 2025])
+    y = np.array([10, 15, 25, 45, 75, 100])
+    
+    plt.plot(x, y, marker='o', linewidth=2, markersize=8)
+    plt.title("Developer Productivity with AI Tools", fontsize=14)
+    plt.xlabel("Year")
+    plt.ylabel("Productivity Score")
+    plt.grid(True, alpha=0.3)
+    
+    plt.savefig(images_dir / 'productivity-trend.png', dpi=300, bbox_inches='tight')
+    plt.close()
+
+# 2. Create a bar chart showing "Popular AI Tools Usage"
+def create_tools_usage_chart():
+    plt.figure(figsize=(10, 6))
+    tools = ['GitHub Copilot', 'Microsoft 365\nCopilot', 'Copilot\nStudio', 'Azure\nCopilot']
+    usage = [85, 65, 45, 40]
+    
+    plt.bar(tools, usage, color=sns.color_palette("husl", 4))
+    plt.title("AI Tools Adoption Rate (2025)", fontsize=14)
+    plt.ylabel("Usage Percentage")
+    plt.ylim(0, 100)
+    
+    # Add percentage labels on top of each bar
+    for i, v in enumerate(usage):
+        plt.text(i, v + 1, f'{v}%', ha='center', fontsize=10)
+    
+    plt.savefig(images_dir / 'tools-usage.png', dpi=300, bbox_inches='tight')
+    plt.close()
+
+# 3. Create a pie chart showing "Time saved by category"
+def create_time_savings_chart():
+    plt.figure(figsize=(10, 8))
+    categories = ['Code Generation', 'Documentation', 'Testing', 'Code Review', 'Other']
+    sizes = [35, 25, 20, 15, 5]
+    explode = (0.1, 0, 0, 0, 0)
+    
+    plt.pie(sizes, explode=explode, labels=categories, autopct='%1.0f%%',
+            shadow=True, startangle=90)
+    plt.title("Time Saved by AI Tools - By Category", fontsize=14)
+    
+    plt.savefig(images_dir / 'time-savings.png', dpi=300, bbox_inches='tight')
+    plt.close()
+
+if __name__ == "__main__":
+    print("Generating test images...")
+    create_productivity_chart()
+    create_tools_usage_chart()
+    create_time_savings_chart()
+    print("Done! Images have been saved to the images directory.")

Content/Tips/images/productivity-trend.png

@@ -0,0 +1,130 @@
+---
+title: "Using GitHub Copilot to Visualize Data"
+description: "Learn how to use GitHub Copilot to create beautiful data visualizations with Python and JavaScript"
+category: "GitHub Copilot"
+tags: ["data-visualization", "python", "javascript", "charts", "plotting"]
+author: "Tech Team"
+publishedDate: "2025-06-09"
+difficulty: "Intermediate"
+---
+
+# Using GitHub Copilot to Visualize Data
+
+GitHub Copilot is a powerful ally when working with data visualization. Let's explore how it can help you create stunning visualizations with minimal effort, using real-world examples from AI development trends.
+
+## AI Productivity Trends
+
+First, let's look at how developer productivity has increased with AI tools:
+
+![Developer Productivity Trend](images/productivity-trend.png "Developer productivity increase with AI tools from 2020 to 2025")
+
+This visualization shows the dramatic increase in developer productivity scores from 2020 to 2025, highlighting the impact of AI-powered development tools.
+
+## AI Tools Adoption
+
+Next, let's examine the adoption rates of various AI tools in the development community:
+
+![AI Tools Usage](images/tools-usage.png "Adoption rates of different AI tools in 2025")
+
+The chart clearly shows GitHub Copilot leading the adoption rates among AI development tools, with significant uptake of other Copilot variants as well.
+
+## Time Savings Analysis
+
+Finally, let's break down where developers are saving time with AI tools:
+
+![Time Savings by Category](images/time-savings.png "Distribution of time saved using AI tools by category")
+
+The pie chart reveals that code generation represents the largest time savings, followed by documentation and testing tasks.
+
+## Python Example: Creating These Visualizations
+
+Here's a simple example of creating a bar chart with Python using Copilot:
+
+Here's how we created these visualizations using Python with Copilot. Notice how Copilot helps structure the code and suggests appropriate styling:
+
+```python
+import matplotlib.pyplot as plt
+import seaborn as sns
+import numpy as np
+
+# Set style with Copilot's suggestion
+plt.style.use('seaborn-v0_8')
+sns.set_theme()
+sns.set_palette("husl")
+
+# Create a line plot for productivity trend
+def create_productivity_chart():
+    plt.figure(figsize=(10, 6))
+    years = np.array([2020, 2021, 2022, 2023, 2024, 2025])
+    scores = np.array([10, 15, 25, 45, 75, 100])
+    
+    plt.plot(years, scores, marker='o', linewidth=2, markersize=8)
+    plt.title("Developer Productivity with AI Tools")
+    plt.xlabel("Year")
+    plt.ylabel("Productivity Score")
+    plt.grid(True, alpha=0.3)
+```
+
+Copilot will help you with the correct syntax and best practices for data visualization. It can even suggest appropriate chart types based on your data structure!
+
+## Interactive Web Visualizations
+
+For web applications, Copilot can help you create interactive visualizations using Chart.js. Here's how you can create an interactive version of our AI tools adoption chart:
+
+```javascript
+const ctx = document.getElementById('aiToolsChart').getContext('2d');
+new Chart(ctx, {
+    type: 'bar',
+    data: {
+        labels: ['GitHub Copilot', 'Microsoft 365 Copilot', 'Copilot Studio', 'Azure Copilot'],
+        datasets: [{
+            label: 'Adoption Rate (%)',
+            data: [85, 65, 45, 40],
+            backgroundColor: [
+                'rgba(255, 99, 132, 0.8)',
+                'rgba(54, 162, 235, 0.8)',
+                'rgba(255, 206, 86, 0.8)',
+                'rgba(75, 192, 192, 0.8)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        responsive: true,
+        plugins: {
+            title: {
+                display: true,
+                text: 'AI Tools Adoption Rate (2025)'
+            }
+        },
+        scales: {
+            y: {
+                beginAtZero: true,
+                max: 100
+            }
+        }
+    }
+});
+```
+
+## Pro Tips for Data Visualization with Copilot
+
+1. **Start with Comments**: Begin by commenting what you want to achieve. Copilot understands natural language descriptions like:
+   ```python
+   # Create a pie chart showing the distribution of time saved by AI tools
+   # Include percentages and make the most important category pop out
+   ```
+
+2. **Iterate Quickly**: Use Copilot to try different visualization types and customize them.
+3. **Use Modern Libraries**: Copilot excels at suggesting modern visualization libraries and their best practices.
+4. **Responsive Design**: Let Copilot help you make your visualizations responsive and mobile-friendly.
+
+Remember, Copilot can help with:
+
+- Choosing appropriate chart types based on your data
+- Setting up data structures and preprocessing
+- Styling and customization options
+- Handling interactivity and animations
+- Implementing responsive designs and accessibility features
+
+Try these examples and let Copilot help you create beautiful, insightful visualizations that tell your data's story effectively!

Content/Tips/images/time-savings.png

@@ -9,7 +9,9 @@
 
   <ItemGroup>
     <PackageReference Include="Azure.Data.Tables" Version="12.11.0" />
+    <PackageReference Include="Azure.Storage.Blobs" Version="12.24.0" />
     <PackageReference Include="Markdig" Version="0.41.2" />
+    <PackageReference Include="SixLabors.ImageSharp" Version="3.1.9" />
     <PackageReference Include="YamlDotNet" Version="16.3.0" />
   </ItemGroup>
 

Content/Tips/images/tools-usage.png

@@ -1,7 +1,9 @@
 using System.Text;
 using System.Text.RegularExpressions;
+using System.Text.Json;
 using Azure;
 using Azure.Data.Tables;
+using Azure.Storage.Blobs;
 using Markdig;
 using Shared;
 using YamlDotNet.Serialization;
@@ -36,23 +38,80 @@
 {
     // Check if the path is a directory or a file
     if (Directory.Exists(filePath))
-    {
-        // Recursively get all markdown files in the directory
+    {        // Recursively get all markdown files
         var mdFiles = Directory.GetFiles(filePath, "*.md", SearchOption.AllDirectories);
+        
+        // For each markdown file, look for images in its adjacent images folder
+        var imageFiles = mdFiles
+            .SelectMany(mdFile =>
+            {
+                var mdDirectory = Path.GetDirectoryName(mdFile);
+                var imagesPath = Path.Combine(mdDirectory!, "images");
+                return Directory.Exists(imagesPath)
+                    ? Directory.GetFiles(imagesPath, "*.*", SearchOption.AllDirectories)
+                        .Where(f => new[] { ".jpg", ".jpeg", ".png", ".gif", ".webp" }
+                            .Contains(Path.GetExtension(f).ToLowerInvariant()))
+                    : Array.Empty<string>();
+            })
+            .Distinct()
+            .ToArray();
+
         if (mdFiles.Length == 0)
         {
             Console.WriteLine($"No markdown files found in directory: {filePath}");
             return 1;
-        }        int addedCount = 0;
+        }        // Create blob service client for image uploads
+        var blobServiceClient = new BlobServiceClient(connectionString);
+
+        // Process images first
+        Console.WriteLine("\nProcessing images...");
+        var imageUploadResults = new List<ImageInfo>();
+        foreach (var imageFile in imageFiles)
+        {
+            try
+            {
+                var imageInfo = await ImageUploadHelper.ProcessAndUploadImageAsync(imageFile, blobServiceClient);
+                imageUploadResults.Add(imageInfo);
+                Console.WriteLine($"Processed image: {imageFile}");
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"Error processing image {imageFile}: {ex.Message}");
+            }
+        }
+
+        // Now process markdown files
+        Console.WriteLine("\nProcessing markdown files...");
+        int addedCount = 0;
         int updatedCount = 0;
         int unchangedCount = 0;
         int failedCount = 0;
 
         foreach (var mdFile in mdFiles)
-        {
-            try
+        {        try
             {
+                // Parse markdown and look for image references
                 TipModel tip = Shared.ContentUploadHelper.ParseMarkdownFile(mdFile);
+                  // Replace image references in content with proper image IDs
+                foreach (var image in imageUploadResults)
+                {
+                    // Get the markdown file's directory
+                    var mdDirectory = Path.GetDirectoryName(mdFile)!;
+                    // Get the image's directory
+                    var imageDirectory = Path.GetDirectoryName(image.OriginalPath)!;
+                    // Calculate relative path from markdown to image
+                    var relativePath = Path.GetRelativePath(mdDirectory, imageDirectory);
+                    var localImagePath = Path.Combine(relativePath, image.FileName).Replace("\\", "/");
+                    
+                    tip.Content = tip.Content.Replace(
+                        $"]({localImagePath}",
+                        $"](/images/{image.ImageId}/original"
+                    );
+                }
+
+                // Add the image info to the content entity
+                tip.Images = JsonSerializer.Serialize(imageUploadResults);
+                
                 var status = await Shared.ContentUploadHelper.UploadToTableStorage(tip, connectionString);
 
                 switch (status)
@@ -86,16 +145,59 @@
         Console.WriteLine($"Total:     {mdFiles.Length}");
 
         return failedCount == 0 ? 0 : 1;
-    }
-    else
+    }    else
     {
         // Parse the markdown file
         if (!File.Exists(filePath))
         {
             Console.WriteLine($"File not found: {filePath}");
             return 1;
         }
+
+        // Create BlobServiceClient for single file
+        var blobServiceClient = new BlobServiceClient(connectionString);
+        var imageUploadResults = new List<ImageInfo>();
+
+        // Check if there are any images in the images directory
+        var imageDir = Path.Combine(Path.GetDirectoryName(filePath)!, "images");
+        if (Directory.Exists(imageDir))
+        {
+            var imageFiles = Directory.GetFiles(imageDir, "*.*")
+                .Where(f => new[] { ".jpg", ".jpeg", ".png", ".gif", ".webp" }
+                    .Contains(Path.GetExtension(f).ToLowerInvariant()))
+                .ToArray();
+
+            foreach (var imageFile in imageFiles)
+            {
+                try
+                {
+                    var imageInfo = await ImageUploadHelper.ProcessAndUploadImageAsync(imageFile, blobServiceClient);
+                    imageUploadResults.Add(imageInfo);
+                    Console.WriteLine($"Processed image: {imageFile}");
+                }
+                catch (Exception ex)
+                {
+                    Console.WriteLine($"Error processing image {imageFile}: {ex.Message}");
+                }
+            }
+        }
+
+        // Parse and process markdown
         TipModel tip = Shared.ContentUploadHelper.ParseMarkdownFile(filePath);
+
+        // Replace image references
+        foreach (var image in imageUploadResults)
+        {
+            var localImagePath = $"images/{image.FileName}";
+            tip.Content = tip.Content.Replace(
+                $"]({localImagePath}",
+                $"](/images/{image.ImageId}/original"
+            );
+        }
+
+        // Add image info to content
+        tip.Images = System.Text.Json.JsonSerializer.Serialize(imageUploadResults);
+
         // Upload to Azure Table Storage
         await Shared.ContentUploadHelper.UploadToTableStorage(tip, connectionString);
         return 0;

Content/Tips/visualize-data-with-copilot.md

@@ -26,4 +26,7 @@ public class ContentEntity : ITableEntity
         public string Slug { get; set; } = string.Empty;
         // Content hash for change detection
         public string ContentHash { get; set; } = string.Empty;
+        
+        // Store as JSON string of ImageInfo objects
+        public string Images { get; set; } = string.Empty;
     }

ContentLoader/ContentLoader.csproj

@@ -40,7 +40,7 @@ public static TipModel ParseMarkdownFile(string filePath)
                 Content = markdownContent,
                 FileName = Path.GetFileName(filePath)
             };
-            if (frontMatterData.TryGetValue("publishedDate", out object publishedDateObj) && publishedDateObj != null)
+            if (frontMatterData.TryGetValue("publishedDate", out object? publishedDateObj) && publishedDateObj != null)
             {
                 if (DateTime.TryParse(publishedDateObj.ToString(), out DateTime publishedDate))
                 {
@@ -152,8 +152,8 @@ private static string CalculateContentHash(TipModel tip)
                     PublishedDate = DateTime.SpecifyKind(tip.PublishedDate, DateTimeKind.Utc),
                     Description = tip.Description,
                     Content = tip.Content,
-                    FileName = tip.FileName,
-                    ContentHash = contentHash
+                    FileName = tip.FileName,                ContentHash = contentHash,
+                Images = tip.Images
                 };
 
                 await tableClient.UpsertEntityAsync(entity);