<commit_before><div class="col-xs-8 video_section">
	<video id="product_visual_video" loop muted width="100%" height="100%">
		<source src="images/video/product_visualization.mp4" type="video/mp4">
	</video>
</div>


<div class="col-xs-5 left-section hideLeftProductVisual">
	<div class="staticPictureSection" style="position: relative;">

		<div class="" style="position: relative; display: flex; height: 70%;">
			  	<div class="mySlides">
			  		<div class="productImages">
						<div class="singleImage" style="height: 70%;">
							<div class="productVisualizer">
								<div class="threesixty productrender">
									<div class="spinner">
										<span>0%</span>
									</div>
									<ol class="threesixty_images ts" style="text-align: justify;"></ol>
								</div>
							</div>

						</div>
					</div>
				</div>
				<div class="mySlides">
			  		<div class="productImages">
						<div class="singleImage" style="height: 70%;">
							<div class="productVisualizer">
								<div class="threesixty productrender2">
									<div class="spinner">
										<span>0%</span>
									</div>
									<ol class="threesixty_images ts" style="text-align: justify;"></ol>
								</div>
							</div>
						</div>
					</div>
				</div>
			<div><img class="mySlides" src="images/fabric/default.png" style="width:100%"></div>
			<div><img class="mySlides" src="images/fabric/blue.png" style="width:100%"></div> 
		</div>

		<div class="click_and_drag">
				<img src="images/click_n_drag.png" style="max-width: 100px; padding-bottom: 5px;">
			</div>
	</div>
<a class="btn-floating display-left" onclick="plusDivs(-1)">&#10094;</a>
<a class="btn-floating display-right" onclick="plusDivs(1)">&#10095;</a>
</div>

<div class="col-xs-3 middle-section hideMiddleProductVisual">
	<div class="staticPictureSection2">
		<div class="col-xs-12 productInfo" style="text-align: left !important;">

			<img src="images/product_name_content.png">

			<p>Available Colors</p>
			<ul class="availableColorsList">
			<li><a href="#" style="background-color: #2f3349;" data-color="5" ng-click="pickPallete($event)">&nbsp;</a></li>
				<li><a href="#" style="background-color: #eae9e5;" data-color="6" ng-click="pickPallete($event)">&nbsp;</a></li>
				<li><a href="#" style="background-color: #7a736d;" data-color="7" ng-click="pickPallete($event)">&nbsp;</a></li>
				<li><a href="#" style="background-color: #572828;" data-color="8" ng-click="pickPallete($event)">&nbsp;</a></li>
			</ul>
		</div>
	</div>

</div>

<div class="col-xs-4 right-section" style="float:right;">
	<div>
		<div class="switchViewButton">
			<button class="btn btn-lg" id="main_view_button_productVisual" onclick="pause4()">Main View</button>
			<button class="btn btn-lg" id="video_button_productVisual" onclick="play4()">Video</button>
		</div>
		<h2>Product Visualization</h2>
		<p>360&deg; product visualizations are the most captivating way to showcase any product. These photorealistic renders feature every angle of an item with options to rotate the product and change patterns, colors, and textures.</p>
	</div>
</div>

<script>
$(document).ready(function(){
	$('.productrender').ThreeSixty({
	      totalFrames: 73, // Total no. of image you have for 360 slider
	      endFrame: 73, // end frame for the auto spin animation
	      currentFrame: 1, // This the start frame for auto spin
	      imgList: '.threesixty_images', // selector for image list
	      progress: '.spinner', // selector to show the loading progress
	      imagePath: 'assets/fabric/white/', // path of the image assets
	      filePrefix: '', // file prefix if any
	      ext: '.jpg', // extention for the assets
	      height: 450,
	      width: 447,
	      disableSpin: true
	  });
		$('.productrender2').ThreeSixty({
	      totalFrames: 73, // Total no. of image you have for 360 slider
	      endFrame: 73, // end frame for the auto spin animation
	      currentFrame: 1, // This the start frame for auto spin
	      imgList: '.threesixty_images', // selector for image list
	      progress: '.spinner', // selector to show the loading progress
	      imagePath: 'assets/fabric/blue/', // path of the image assets
	      filePrefix: '', // file prefix if any
	      ext: '.jpg', // extention for the assets
	      height: 450,
	      width: 447,
	      disableSpin: true
	  });

});


$("#video_button_productVisual").click(function() {
  $(".hideLeftProductVisual, .hideMiddleProductVisual").fadeOut(1000, function() {
  	$(".hideLeftProductVisual, .hideMiddleProductVisual").hide();
  });
});

$("#main_view_button_productVisual").click(function() {
  $(".hideLeftProductVisual, .hideMiddleProductVisual").fadeIn(1000);
});


var myVideo4 = document.getElementById("product_visual_video");

function play4() {
    if (myVideo4.paused)
        myVideo4.play();
}

function pause4() {
	if (myVideo4.play)
		myVideo4.pause();
}



var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script><commit_msg>removed the unwanted images in the inner slider of Production Visualization<commit_after><div class="col-xs-8 video_section">
	<video id="product_visual_video" loop muted width="100%" height="100%">
		<source src="images/video/product_visualization.mp4" type="video/mp4">
	</video>
</div>


<div class="col-xs-5 left-section hideLeftProductVisual">
	<div class="staticPictureSection" style="position: relative;">

		<div class="" style="position: relative; display: flex; flex-direction: column; justify-content; center;height: 70%;">
			  	<div class="mySlides">
			  		<div class="productImages">
						<div class="singleImage" style="height: 70%;">
							<div class="productVisualizer">
								<div class="threesixty productrender">
									<div class="spinner">
										<span>0%</span>
									</div>
									<ol class="threesixty_images ts" style="text-align: justify;"></ol>
								</div>
							</div>

						</div>
					</div>
				</div>
				<div class="mySlides">
			  		<div class="productImages">
						<div class="singleImage" style="height: 70%;">
							<div class="productVisualizer">
								<div class="threesixty productrender2">
									<div class="spinner">
										<span>0%</span>
									</div>
									<ol class="threesixty_images ts" style="text-align: justify;"></ol>
								</div>
							</div>
						</div>
					</div>
				</div>
		</div>

		<div class="click_and_drag">
				<img src="images/click_n_drag.png" style="max-width: 100px; padding-bottom: 5px;">
			</div>
	</div>
<a class="btn-floating display-left" onclick="plusDivs(-1)">&#10094;</a>
<a class="btn-floating display-right" onclick="plusDivs(1)">&#10095;</a>
</div>

<div class="col-xs-3 middle-section hideMiddleProductVisual">
	<div class="staticPictureSection2">
		<div class="col-xs-12 productInfo" style="text-align: left !important;">

			<img src="images/product_name_content.png">

			<p>Available Colors</p>
			<ul class="availableColorsList">
			<li><a href="#" style="background-color: #2f3349;" data-color="5" ng-click="pickPallete($event)">&nbsp;</a></li>
				<li><a href="#" style="background-color: #eae9e5;" data-color="6" ng-click="pickPallete($event)">&nbsp;</a></li>
				<li><a href="#" style="background-color: #7a736d;" data-color="7" ng-click="pickPallete($event)">&nbsp;</a></li>
				<li><a href="#" style="background-color: #572828;" data-color="8" ng-click="pickPallete($event)">&nbsp;</a></li>
			</ul>
		</div>
	</div>

</div>

<div class="col-xs-4 right-section" style="float:right;">
	<div>
		<div class="switchViewButton">
			<button class="btn btn-lg" id="main_view_button_productVisual" onclick="pause4()">Main View</button>
			<button class="btn btn-lg" id="video_button_productVisual" onclick="play4()">Video</button>
		</div>
		<h2>Product Visualization</h2>
		<p>360&deg; product visualizations are the most captivating way to showcase any product. These photorealistic renders feature every angle of an item with options to rotate the product and change patterns, colors, and textures.</p>
	</div>
</div>

<script>
$(document).ready(function(){
	$('.productrender').ThreeSixty({
	      totalFrames: 73, // Total no. of image you have for 360 slider
	      endFrame: 73, // end frame for the auto spin animation
	      currentFrame: 1, // This the start frame for auto spin
	      imgList: '.threesixty_images', // selector for image list
	      progress: '.spinner', // selector to show the loading progress
	      imagePath: 'assets/fabric/white/', // path of the image assets
	      filePrefix: '', // file prefix if any
	      ext: '.jpg', // extention for the assets
	      height: 450,
	      width: 447,
	      disableSpin: true
	  });
		$('.productrender2').ThreeSixty({
	      totalFrames: 73, // Total no. of image you have for 360 slider
	      endFrame: 73, // end frame for the auto spin animation
	      currentFrame: 1, // This the start frame for auto spin
	      imgList: '.threesixty_images', // selector for image list
	      progress: '.spinner', // selector to show the loading progress
	      imagePath: 'assets/fabric/blue/', // path of the image assets
	      filePrefix: '', // file prefix if any
	      ext: '.jpg', // extention for the assets
	      height: 450,
	      width: 447,
	      disableSpin: true
	  });

});


$("#video_button_productVisual").click(function() {
  $(".hideLeftProductVisual, .hideMiddleProductVisual").fadeOut(1000, function() {
  	$(".hideLeftProductVisual, .hideMiddleProductVisual").hide();
  });
});

$("#main_view_button_productVisual").click(function() {
  $(".hideLeftProductVisual, .hideMiddleProductVisual").fadeIn(1000);
});


var myVideo4 = document.getElementById("product_visual_video");

function play4() {
    if (myVideo4.paused)
        myVideo4.play();
}

function pause4() {
	if (myVideo4.play)
		myVideo4.pause();
}



var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>
{'fraction_non_alphanumeric': 0.1713253470241491, 'fraction_numerical': 0.022818026240730177, 'mean_word_length': 3.5914447839371455, 'pattern_counts': {'":': 0, '<': 199, '<?xml version=': 0, '>': 197, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2341572', 'n_tokens_mistral': 4088, 'n_tokens_neox': 3385, 'n_words': 824}