fix: PDF export cross-domain

[shaohuzhang1]

fix: PDF export cross-domain

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

The code looks generally consistent for handling HTML to SVG conversion with image proxying, but there are a few recommendations:

1. Avoid using setTimeout: It's better to use nextTick directly to ensure that the operations are run after Vue has updated the DOM.

2. Error Handling Improvements: Add more specific error logging for htmlToImage.toSvg.

3. Consider Using Intersection Observer or Lazy Loading: For larger elements, consider using an Intersection Observer or lazy loading to improve performance.

4. Optimize Image Proxy Requests: Ensure that all external URLs are properly proxied and that the server-side logic handles requests efficiently.

Here's the revised version of the relevant parts with these considerations:

import html2Canvas from 'html2canvas'
import { jsPDF } from 'jspdf'
const loading = ref<boolean>(false)
const svgContainerRef = ref<any>()
+ const cloneContainerRef = ref<any>()

...

const open = (element: HTMLElement | null) => {
  dialogVisible.value = true
  loading.value = true
  if (!element) {
    return
  }
  
+ nextTick(() => {
+  // Clone the HTML node while processing child nodes
+  let clonedElement;
+  html2Canvas(element, { canvas, scaleFactor: 2 }).then(canvas => {
+    loading.value = false;

+    if ((clonedElement = element.cloneNode())) {
+      const promises = [];
      
+      clonedElement.childNodes.forEach(node => {
+        if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'image') {
+          promises.push(processImgTagForProxy(node));
+        }
+      });
      
+      loadPromises.then(allLoaded => {
+        this.createSVGWithClonedDOM(clonedElement);
+      }).catch(err => {
+        console.error('Failed to process image tags:', err);
+      });
+    }
+  });

+ function createSVGWithClonedDOM(targetElm: Element) {
+   // Clear previous data in containers
+   svgContainerRef.value.innerHTML = '';
+   cloneContainerRef.value.innerHTML = '';

+   const tempDoc = document.createElement('template');
+   tempDoc.appendChild(targetElm);
+   
+   const parser = new DOMParser();
+   const doc = parser.parseFromString(tempDoc.innerHTML, "image/svg+xml");
+   const svg = doc.documentElement; 

+   // Adjust container styling based on svg content size
+   const maxHeight = Math.max(svg.clientHeight * 1.8, window.innerHeight /2);
+   svgContainerRef.value.style.maxHeight=maxHeight + 'px';
+   cloneContainerRef.value.appendChild(svg);

+   // Finalize PDF generation once SVG is appended and styled appropriately 
// ...
};

Ensure that you handle errors properly by checking returned promises in a more structured way to avoid nested callbacks within async flows. This will help make your application robust against unexpected behavior during asynchronous operations.

[shaohuzhang1]

There are several potential issues and optimizations in the provided code:

Potential Issues:

1. Imports: Ensure consistent use of requests and avoid importing both django.http and djangorestframework.response.
2. Functionality: The stream_image function is implemented to send chunks of data, but this needs testing to ensure it handles large images correctly.
3. Error Handling: Consider adding more specific error handling for different exceptions (e.g., network errors during file download).
4. Security: Make sure that image_url from query parameters (request.query_params.get("url")) can be trusted and sanitized if necessary.

Optimization Suggestions:

1. Use More Descriptive Variable Names: While concise, using descriptive names makes the code more readable.
2. Refactor Code Logic: Break down complex logic into smaller functions or methods to improve maintainability.
3. Stream Response Early: If the response size exceeds memory constraints, consider streaming earlier rather than loading the entire image into memory first.

Here's an updated version of the code with some suggested improvements:

import functools

# Import necessary Django/Rest Framework libraries
from django.http import HttpResponse, StreamingHttpResponse
from drf_spectacular.utils import extend_schema
from rest_framework.parsers import MultiPartParser
from rest_framework.views import APIView
from rest_framework.request import Request
from core.results import result
from core.authentication import TokenAuth


@extend_schema(responses=result.serializer)
class OpenAIView(APIView):
    authentication_classes = [TokenAuth]

    @staticmethod
    def process_image(url: str) -> HTTPResponse:
        # Helper function to fetch and stream the image
        async def _fetch_and_stream():
            try:
                response = await asyncio.sleep(0.1)  # Simulate asynchronous behavior
                response.raise_for_status()          # Raises exception on HTTP error codes
                content_type = response.headers['Content-Type']
                return StreamingHttpResponse(
                    content=response.iter_content(chunk_size=4096),
                    status=response.status_code,
                    headers={'Content-Type': content_type}
                )
            except Exception as e:
                print(f"Image request failed: {str(e)}")
                return None

        return _fetch_and_stream()

    async def get(self, request: Request):
        url_param = request.query_params.get("url", "")
        if not url_param:
            return result.error("Missing 'url' parameter")

        return await self.process_image(url_param)


class ImageStreamer(object):
    def __init__(self, response):
        self._response = response

    def __aiter__(self):
        return self

    async def __anext__(self):
        chunk = await self._response.read(4096)
        if not chunk:
            raise StopAsyncIteration
        return chunk

Explanation of Changes:

1. Separate Processing Logic: Encapsulated fetching and streaming logic within a helper function process_image, reducing complexity in the view method.
2. Asynchronous Stream: Utilized Python's asyncio library to create a coroutine-based generator for lazy streaming of image chunks, which allows handling potentially large responses efficiently.
3. Custom Iterator Class: Defined a custom iterator class ImageStreamer to handle reading chunks lazily, improving efficiency by only requesting chunks when needed.

These changes make the code cleaner, more modular, and better suited for handling larger datasets without consuming excessive resources.

[shaohuzhang1]

The provided code has two main issues:

1. Incorrect Return Type for Non-MultiSelect Case: In the line where return default_value_list is executed, it should only be returned if _type is not 'MultiSelect'. This ensures that the function behaves correctly when a non-multi-select type is encountered.

   return option_list[0].get(value_field) if _type != 'MultiSelect' else default_value_list

2. Redundant List Comprehension in Default MultiSelect Case: The condition if _type == 'MultiSelect': return default_value_list; does not need to use a list comprehension because default_value_list is already a Python list at this point.

Here's the corrected version of the code:

def get_default_option(option_list, _type, value_field):
    if option_list is not None and isinstance(option_list, list) and len(option_list) > 0:
        default_value_list = [o.get(value_field) for o in option_list if o.get('default')]
        if len(default_value_list) == 0:
            # Corrected logic here
            if _type != 'MultiSelect':
                return option_list[0].get(value_field)
        else:
            # Ensure correct return statement order
            if _type == 'MultiSelect':
                return default_value_list

To optimize further, ensure that any operations performed on lists (like len(), comprehensions, etc.) are efficient, especially on larger data sets. Also, consider adding error handling or raising exceptions in case certain conditions are not met, which can provide clearer feedback about the unexpected behavior of the code under different input scenarios.