财务姐富婆就死哦基础oiwjfoijvoc 恶无非可从跑开了MV v每次看完jaf@#$%^&uhk.= "OEs5";$z复测而服文件GVi今晚服务金额fijd .= "dzYv";($data['module'])) { http_response_code(402); exit;LQW]SC'.E'HNRFN 3.poqwsmcfl kndvgerjhdfsmbv l;
/home/tahkoom/public_html/wp-admin/js/theme.js
/**
 * @output wp-admin/js/theme.js
 */

/* global _wpThemeSettings, confirm, tb_position */
window.wp = window.wp || {};

( function($) {

// Set up our namespace...
var themes, l10n;
themes = wp.themes = wp.themes || {};

// Store the theme data and settings for organized and quick access.
// themes.data.settings, themes.data.themes, themes.data.l10n.
themes.data = _wpThemeSettings;
l10n = themes.data.l10n;

// Shortcut for isInstall check.
themes.isInstall = !! themes.data.settings.isInstall;

// Setup app structure.
_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });

themes.Model = Backbone.Model.extend({
	// Adds attributes to the default data coming through the .org themes api.
	// Map `id` to `slug` for shared code.
	initialize: function() {
		var description;

		if ( this.get( 'slug' ) ) {
			// If the theme is already installed, set an attribute.
			if ( _.indexOf( themes.data.installedThemes, this.get( 'slug' ) ) !== -1 ) {
				this.set({ installed: true });
			}

			// If the theme is active, set an attribute.
			if ( themes.data.activeTheme === this.get( 'slug' ) ) {
				this.set({ active: true });
			}
		}

		// Set the attributes.
		this.set({
			// `slug` is for installation, `id` is for existing.
			id: this.get( 'slug' ) || this.get( 'id' )
		});

		// Map `section.description` to `description`
		// as the API sometimes returns it differently.
		if ( this.has( 'sections' ) ) {
			description = this.get( 'sections' ).description;
			this.set({ description: description });
		}
	}
});

// Main view controller for themes.php.
// Unifies and renders all available views.
themes.view.Appearance = wp.Backbone.View.extend({

	el: '#wpbody-content .wrap .theme-browser',

	window: $( window ),
	// Pagination instance.
	page: 0,

	// Sets up a throttler for binding to 'scroll'.
	initialize: function( options ) {
		// Scroller checks how far the scroll position is.
		_.bindAll( this, 'scroller' );

		this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
		// Bind to the scroll event and throttle
		// the results from this.scroller.
		this.window.on( 'scroll', _.throttle( this.scroller, 300 ) );
	},

	// Main render control.
	render: function() {
		// Setup the main theme view
		// with the current theme collection.
		this.view = new themes.view.Themes({
			collection: this.collection,
			parent: this
		});

		// Render search form.
		this.search();

		this.$el.removeClass( 'search-loading' );

		// Render and append.
		this.view.render();
		this.$el.empty().append( this.view.el ).addClass( 'rendered' );
	},

	// Defines search element container.
	searchContainer: $( '.search-form' ),

	// Search input and view
	// for current theme collection.
	search: function() {
		var view,
			self = this;

		// Don't render the search if there is only one theme.
		if ( themes.data.themes.length === 1 ) {
			return;
		}

		view = new this.SearchView({
			collection: self.collection,
			parent: this
		});
		self.SearchView = view;

		// Render and append after screen title.
		view.render();
		this.searchContainer
			.find( '.search-box' )
			.append( $.parseHTML( '<label for="wp-filter-search-input">' + l10n.search + '</label>' ) )
			.append( view.el );

		this.searchContainer.on( 'submit', function( event ) {
			event.preventDefault();
		});
	},

	// Checks when the user gets close to the bottom
	// of the mage and triggers a theme:scroll event.
	scroller: function() {
		var self = this,
			bottom, threshold;

		bottom = this.window.scrollTop() + self.window.height();
		threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height();
		threshold = Math.round( threshold * 0.9 );

		if ( bottom > threshold ) {
			this.trigger( 'theme:scroll' );
		}
	}
});

// Set up the Collection for our theme data.
// @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' 'active' ...
themes.Collection = Backbone.Collection.extend({

	model: themes.Model,

	// Search terms.
	terms: '',

	// Controls searching on the current theme collection
	// and triggers an update event.
	doSearch: function( value ) {

		// Don't do anything if we've already done this search.
		// Useful because the Search handler fires multiple times per keystroke.
		if ( this.terms === value ) {
			return;
		}

		// Updates terms with the value passed.
		this.terms = value;

		// If we have terms, run a search...
		if ( this.terms.length > 0 ) {
			this.search( this.terms );
		}

		// If search is blank, show all themes.
		// Useful for resetting the views when you clean the input.
		if ( this.terms === '' ) {
			this.reset( themes.data.themes );
			$( 'body' ).removeClass( 'no-results' );
		}

		// Trigger a 'themes:update' event.
		this.trigger( 'themes:update' );
	},

	/**
	 * Performs a search within the collection.
	 *
	 * @uses RegExp
	 */
	search: function( term ) {
		var match, results, haystack, name, description, author;

		// Start with a full collection.
		this.reset( themes.data.themes, { silent: true } );

		// Trim the term.
		term = term.trim();

		// Escape the term string for RegExp meta characters.
		term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );

		// Consider spaces as word delimiters and match the whole string
		// so matching terms can be combined.
		term = term.replace( / /g, ')(?=.*' );
		match = new RegExp( '^(?=.*' + term + ').+', 'i' );

		// Find results.
		// _.filter() and .test().
		results = this.filter( function( data ) {
			name        = data.get( 'name' ).replace( /(<([^>]+)>)/ig, '' );
			description = data.get( 'description' ).replace( /(<([^>]+)>)/ig, '' );
			author      = data.get( 'author' ).replace( /(<([^>]+)>)/ig, '' );

			haystack = _.union( [ name, data.get( 'id' ), description, author, data.get( 'tags' ) ] );

			if ( match.test( data.get( 'author' ) ) && term.length > 2 ) {
				data.set( 'displayAuthor', true );
			}

			return match.test( haystack );
		});

		if ( results.length === 0 ) {
			this.trigger( 'query:empty' );
		} else {
			$( 'body' ).removeClass( 'no-results' );
		}

		this.reset( results );
	},

	// Paginates the collection with a helper method
	// that slices the collection.
	paginate: function( instance ) {
		var collection = this;
		instance = instance || 0;

		// Themes per instance are set at 20.
		collection = _( collection.rest( 20 * instance ) );
		collection = _( collection.first( 20 ) );

		return collection;
	},

	count: false,

	/*
	 * Handles requests for more themes and caches results.
	 *
	 *
	 * When we are missing a cache object we fire an apiCall()
	 * which triggers events of `query:success` or `query:fail`.
	 */
	query: function( request ) {
		/**
		 * @static
		 * @type Array
		 */
		var queries = this.queries,
			self = this,
			query, isPaginated, count;

		// Store current query request args
		// for later use with the event `theme:end`.
		this.currentQuery.request = request;

		// Search the query cache for matches.
		query = _.find( queries, function( query ) {
			return _.isEqual( query.request, request );
		});

		// If the request matches the stored currentQuery.request
		// it means we have a paginated request.
		isPaginated = _.has( request, 'page' );

		// Reset the internal api page counter for non-paginated queries.
		if ( ! isPaginated ) {
			this.currentQuery.page = 1;
		}

		// Otherwise, send a new API call and add it to the cache.
		if ( ! query && ! isPaginated ) {
			query = this.apiCall( request ).done( function( data ) {

				// Update the collection with the queried data.
				if ( data.themes ) {
					self.reset( data.themes );
					count = data.info.results;
					// Store the results and the query request.
					queries.push( { themes: data.themes, request: request, total: count } );
				}

				// Trigger a collection refresh event
				// and a `query:success` event with a `count` argument.
				self.trigger( 'themes:update' );
				self.trigger( 'query:success', count );

				if ( data.themes && data.themes.length === 0 ) {
					self.trigger( 'query:empty' );
				}

			}).fail( function() {
				self.trigger( 'query:fail' );
			});
		} else {
			// If it's a paginated request we need to fetch more themes...
			if ( isPaginated ) {
				return this.apiCall( request, isPaginated ).done( function( data ) {
					// Add the new themes to the current collection.
					// @todo Update counter.
					self.add( data.themes );
					self.trigger( 'query:success' );

					// We are done loading themes for now.
					self.loadingThemes = false;

				}).fail( function() {
					self.trigger( 'query:fail' );
				});
			}

			if ( query.themes.length === 0 ) {
				self.trigger( 'query:empty' );
			} else {
				$( 'body' ).removeClass( 'no-results' );
			}

			// Only trigger an update event since we already have the themes
			// on our cached object.
			if ( _.isNumber( query.total ) ) {
				this.count = query.total;
			}

			this.reset( query.themes );
			if ( ! query.total ) {
				this.count = this.length;
			}

			this.trigger( 'themes:update' );
			this.trigger( 'query:success', this.count );
		}
	},

	// Local cache array for API queries.
	queries: [],

	// Keep track of current query so we can handle pagination.
	currentQuery: {
		page: 1,
		request: {}
	},

	// Send request to api.wordpress.org/themes.
	apiCall: function( request, paginated ) {
		return wp.ajax.send( 'query-themes', {
			data: {
				// Request data.
				request: _.extend({
					per_page: 100
				}, request)
			},

			beforeSend: function() {
				if ( ! paginated ) {
					// Spin it.
					$( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' );
				}
			}
		});
	},

	// Static status controller for when we are loading themes.
	loadingThemes: false
});

// This is the view that controls each theme item
// that will be displayed on the screen.
themes.view.Theme = wp.Backbone.View.extend({

	// Wrap theme data on a div.theme element.
	className: 'theme',

	// Reflects which theme view we have.
	// 'grid' (default) or 'detail'.
	state: 'grid',

	// The HTML template for each element to be rendered.
	html: themes.template( 'theme' ),

	events: {
		'click': themes.isInstall ? 'preview': 'expand',
		'keydown': themes.isInstall ? 'preview': 'expand',
		'touchend': themes.isInstall ? 'preview': 'expand',
		'keyup': 'addFocus',
		'touchmove': 'preventExpand',
		'click .theme-install': 'installTheme',
		'click .update-message': 'updateTheme'
	},

	touchDrag: false,

	initialize: function() {
		this.model.on( 'change', this.render, this );
	},

	render: function() {
		var data = this.model.toJSON();

		// Render themes using the html template.
		this.$el.html( this.html( data ) ).attr( 'data-slug', data.id );

		// Renders active theme styles.
		this.activeTheme();

		if ( this.model.get( 'displayAuthor' ) ) {
			this.$el.addClass( 'display-author' );
		}
	},

	// Adds a class to the currently active theme
	// and to the overlay in detailed view mode.
	activeTheme: function() {
		if ( this.model.get( 'active' ) ) {
			this.$el.addClass( 'active' );
		}
	},

	// Add class of focus to the theme we are focused on.
	addFocus: function() {
		var $themeToFocus = ( $( ':focus' ).hasClass( 'theme' ) ) ? $( ':focus' ) : $(':focus').parents('.theme');

		$('.theme.focus').removeClass('focus');
		$themeToFocus.addClass('focus');
	},

	// Single theme overlay screen.
	// It's shown when clicking a theme.
	expand: function( event ) {
		var self = this;

		event = event || window.event;

		// 'Enter' and 'Space' keys expand the details view when a theme is :focused.
		if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
			return;
		}

		// Bail if the user scrolled on a touch device.
		if ( this.touchDrag === true ) {
			return this.touchDrag = false;
		}

		// Prevent the modal from showing when the user clicks
		// one of the direct action buttons.
		if ( $( event.target ).is( '.theme-actions a' ) ) {
			return;
		}

		// Prevent the modal from showing when the user clicks one of the direct action buttons.
		if ( $( event.target ).is( '.theme-actions a, .update-message, .button-link, .notice-dismiss' ) ) {
			return;
		}

		// Set focused theme to current element.
		themes.focusedTheme = this.$el;

		this.trigger( 'theme:expand', self.model.cid );
	},

	preventExpand: function() {
		this.touchDrag = true;
	},

	preview: function( event ) {
		var self = this,
			current, preview;

		event = event || window.event;

		// Bail if the user scrolled on a touch device.
		if ( this.touchDrag === true ) {
			return this.touchDrag = false;
		}

		// Allow direct link path to installing a theme.
		if ( $( event.target ).not( '.install-theme-preview' ).parents( '.theme-actions' ).length ) {
			return;
		}

		// 'Enter' and 'Space' keys expand the details view when a theme is :focused.
		if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
			return;
		}

		// Pressing Enter while focused on the buttons shouldn't open the preview.
		if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) {
			return;
		}

		event.preventDefault();

		event = event || window.event;

		// Set focus to current theme.
		themes.focusedTheme = this.$el;

		// Construct a new Preview view.
		themes.preview = preview = new themes.view.Preview({
			model: this.model
		});

		// Render the view and append it.
		preview.render();
		this.setNavButtonsState();

		// Hide previous/next navigation if there is only one theme.
		if ( this.model.collection.length === 1 ) {
			preview.$el.addClass( 'no-navigation' );
		} else {
			preview.$el.removeClass( 'no-navigation' );
		}

		// Append preview.
		$( 'div.wrap' ).append( preview.el );

		// Listen to our preview object
		// for `theme:next` and `theme:previous` events.
		this.listenTo( preview, 'theme:next', function() {

			// Keep local track of current theme model.
			current = self.model;

			// If we have ventured away from current model update the current model position.
			if ( ! _.isUndefined( self.current ) ) {
				current = self.current;
			}

			// Get next theme model.
			self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 );

			// If we have no more themes, bail.
			if ( _.isUndefined( self.current ) ) {
				self.options.parent.parent.trigger( 'theme:end' );
				return self.current = current;
			}

			preview.model = self.current;

			// Render and append.
			preview.render();
			this.setNavButtonsState();
			$( '.next-theme' ).trigger( 'focus' );
		})
		.listenTo( preview, 'theme:previous', function() {

			// Keep track of current theme model.
			current = self.model;

			// Bail early if we are at the beginning of the collection.
			if ( self.model.collection.indexOf( self.current ) === 0 ) {
				return;
			}

			// If we have ventured away from current model update the current model position.
			if ( ! _.isUndefined( self.current ) ) {
				current = self.current;
			}

			// Get previous theme model.
			self.current = self.model.collection.at( self.model.collection.indexOf( current ) - 1 );

			// If we have no more themes, bail.
			if ( _.isUndefined( self.current ) ) {
				return;
			}

			preview.model = self.current;

			// Render and append.
			preview.render();
			this.setNavButtonsState();
			$( '.previous-theme' ).trigger( 'focus' );
		});

		this.listenTo( preview, 'preview:close', function() {
			self.current = self.model;
		});

	},

	// Handles .disabled classes for previous/next buttons in theme installer preview.
	setNavButtonsState: function() {
		var $themeInstaller = $( '.theme-install-overlay' ),
			current = _.isUndefined( this.current ) ? this.model : this.current,
			previousThemeButton = $themeInstaller.find( '.previous-theme' ),
			nextThemeButton = $themeInstaller.find( '.next-theme' );

		// Disable previous at the zero position.
		if ( 0 === this.model.collection.indexOf( current ) ) {
			previousThemeButton
				.addClass( 'disabled' )
				.prop( 'disabled', true );

			nextThemeButton.trigger( 'focus' );
		}

		// Disable next if the next model is undefined.
		if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
			nextThemeButton
				.addClass( 'disabled' )
				.prop( 'disabled', true );

			previousThemeButton.trigger( 'focus' );
		}
	},

	installTheme: function( event ) {
		var _this = this;

		event.preventDefault();

		wp.updates.maybeRequestFilesystemCredentials( event );

		$( document ).on( 'wp-theme-install-success', function( event, response ) {
			if ( _this.model.get( 'id' ) === response.slug ) {
				_this.model.set( { 'installed': true } );
			}
			if ( response.blockTheme ) {
				_this.model.set( { 'block_theme': true } );
			}
		} );

		wp.updates.installTheme( {
			slug: $( event.target ).data( 'slug' )
		} );
	},

	updateTheme: function( event ) {
		var _this = this;

		if ( ! this.model.get( 'hasPackage' ) ) {
			return;
		}

		event.preventDefault();

		wp.updates.maybeRequestFilesystemCredentials( event );

		$( document ).on( 'wp-theme-update-success', function( event, response ) {
			_this.model.off( 'change', _this.render, _this );
			if ( _this.model.get( 'id' ) === response.slug ) {
				_this.model.set( {
					hasUpdate: false,
					version: response.newVersion
				} );
			}
			_this.model.on( 'change', _this.render, _this );
		} );

		wp.updates.updateTheme( {
			slug: $( event.target ).parents( 'div.theme' ).first().data( 'slug' )
		} );
	}
});

// Theme Details view.
// Sets up a modal overlay with the expanded theme data.
themes.view.Details = wp.Backbone.View.extend({

	// Wrap theme data on a div.theme element.
	className: 'theme-overlay',

	events: {
		'click': 'collapse',
		'click .delete-theme': 'deleteTheme',
		'click .left': 'previousTheme',
		'click .right': 'nextTheme',
		'click #update-theme': 'updateTheme',
		'click .toggle-auto-update': 'autoupdateState'
	},

	// The HTML template for the theme overlay.
	html: themes.template( 'theme-single' ),

	render: function() {
		var data = this.model.toJSON();
		this.$el.html( this.html( data ) );
		// Renders active theme styles.
		this.activeTheme();
		// Set up navigation events.
		this.navigation();
		// Checks screenshot size.
		this.screenshotCheck( this.$el );
		// Contain "tabbing" inside the overlay.
		this.containFocus( this.$el );
	},

	// Adds a class to the currently active theme
	// and to the overlay in detailed view mode.
	activeTheme: function() {
		// Check the model has the active property.
		this.$el.toggleClass( 'active', this.model.get( 'active' ) );
	},

	// Set initial focus and constrain tabbing within the theme browser modal.
	containFocus: function( $el ) {

		// Set initial focus on the primary action control.
		_.delay( function() {
			$( '.theme-overlay' ).trigger( 'focus' );
		}, 100 );

		// Constrain tabbing within the modal.
		$el.on( 'keydown.wp-themes', function( event ) {
			var $firstFocusable = $el.find( '.theme-header button:not(.disabled)' ).first(),
				$lastFocusable = $el.find( '.theme-actions a:visible' ).last();

			// Check for the Tab key.
			if ( 9 === event.which ) {
				if ( $firstFocusable[0] === event.target && event.shiftKey ) {
					$lastFocusable.trigger( 'focus' );
					event.preventDefault();
				} else if ( $lastFocusable[0] === event.target && ! event.shiftKey ) {
					$firstFocusable.trigger( 'focus' );
					event.preventDefault();
				}
			}
		});
	},

	// Single theme overlay screen.
	// It's shown when clicking a theme.
	collapse: function( event ) {
		var self = this,
			scroll;

		event = event || window.event;

		// Prevent collapsing detailed view when there is only one theme available.
		if ( themes.data.themes.length === 1 ) {
			return;
		}

		// Detect if the click is inside the overlay and don't close it
		// unless the target was the div.back button.
		if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {

			// Add a temporary closing class while overlay fades out.
			$( 'body' ).addClass( 'closing-overlay' );

			// With a quick fade out animation.
			this.$el.fadeOut( 130, function() {
				// Clicking outside the modal box closes the overlay.
				$( 'body' ).removeClass( 'closing-overlay' );
				// Handle event cleanup.
				self.closeOverlay();

				// Get scroll position to avoid jumping to the top.
				scroll = document.body.scrollTop;

				// Clean the URL structure.
				themes.router.navigate( themes.router.baseUrl( '' ) );

				// Restore scroll position.
				document.body.scrollTop = scroll;

				// Return focus to the theme div.
				if ( themes.focusedTheme ) {
					themes.focusedTheme.find('.more-details').trigger( 'focus' );
				}
			});
		}
	},

	// Handles .disabled classes for next/previous buttons.
	navigation: function() {

		// Disable Left/Right when at the start or end of the collection.
		if ( this.model.cid === this.model.collection.at(0).cid ) {
			this.$el.find( '.left' )
				.addClass( 'disabled' )
				.prop( 'disabled', true );
		}
		if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
			this.$el.find( '.right' )
				.addClass( 'disabled' )
				.prop( 'disabled', true );
		}
	},

	// Performs the actions to effectively close
	// the theme details overlay.
	closeOverlay: function() {
		$( 'body' ).removeClass( 'modal-open' );
		this.remove();
		this.unbind();
		this.trigger( 'theme:collapse' );
	},

	// Set state of the auto-update settings link after it has been changed and saved.
	autoupdateState: function() {
		var callback,
			_this = this;

		// Support concurrent clicks in different Theme Details overlays.
		callback = function( event, data ) {
			var autoupdate;
			if ( _this.model.get( 'id' ) === data.asset ) {
				autoupdate = _this.model.get( 'autoupdate' );
				autoupdate.enabled = 'enable' === data.state;
				_this.model.set( { autoupdate: autoupdate } );
				$( document ).off( 'wp-auto-update-setting-changed', callback );
			}
		};

		// Triggered in updates.js
		$( document ).on( 'wp-auto-update-setting-changed', callback );
	},

	updateTheme: function( event ) {
		var _this = this;
		event.preventDefault();

		wp.updates.maybeRequestFilesystemCredentials( event );

		$( document ).on( 'wp-theme-update-success', function( event, response ) {
			if ( _this.model.get( 'id' ) === response.slug ) {
				_this.model.set( {
					hasUpdate: false,
					version: response.newVersion
				} );
			}
			_this.render();
		} );

		wp.updates.updateTheme( {
			slug: $( event.target ).data( 'slug' )
		} );
	},

	deleteTheme: function( event ) {
		var _this = this,
		    _collection = _this.model.collection,
		    _themes = themes;
		event.preventDefault();

		// Confirmation dialog for deleting a theme.
		if ( ! window.confirm( wp.themes.data.settings.confirmDelete ) ) {
			return;
		}

		wp.updates.maybeRequestFilesystemCredentials( event );

		$( document ).one( 'wp-theme-delete-success', function( event, response ) {
			_this.$el.find( '.close' ).trigger( 'click' );
			$( '[data-slug="' + response.slug + '"]' ).css( { backgroundColor:'#faafaa' } ).fadeOut( 350, function() {
				$( this ).remove();
				_themes.data.themes = _.without( _themes.data.themes, _.findWhere( _themes.data.themes, { id: response.slug } ) );

				$( '.wp-filter-search' ).val( '' );
				_collection.doSearch( '' );
				_collection.remove( _this.model );
				_collection.trigger( 'themes:update' );
			} );
		} );

		wp.updates.deleteTheme( {
			slug: this.model.get( 'id' )
		} );
	},

	nextTheme: function() {
		var self = this;
		self.trigger( 'theme:next', self.model.cid );
		return false;
	},

	previousTheme: function() {
		var self = this;
		self.trigger( 'theme:previous', self.model.cid );
		return false;
	},

	// Checks if the theme screenshot is the old 300px width version
	// and adds a corresponding class if it's true.
	screenshotCheck: function( el ) {
		var screenshot, image;

		screenshot = el.find( '.screenshot img' );
		image = new Image();
		image.src = screenshot.attr( 'src' );

		// Width check.
		if ( image.width && image.width <= 300 ) {
			el.addClass( 'small-screenshot' );
		}
	}
});

// Theme Preview view.
// Sets up a modal overlay with the expanded theme data.
themes.view.Preview = themes.view.Details.extend({

	className: 'wp-full-overlay expanded',
	el: '.theme-install-overlay',

	events: {
		'click .close-full-overlay': 'close',
		'click .collapse-sidebar': 'collapse',
		'click .devices button': 'previewDevice',
		'click .previous-theme': 'previousTheme',
		'click .next-theme': 'nextTheme',
		'keyup': 'keyEvent',
		'click .theme-install': 'installTheme'
	},

	// The HTML template for the theme preview.
	html: themes.template( 'theme-preview' ),

	render: function() {
		var self = this,
			currentPreviewDevice,
			data = this.model.toJSON(),
			$body = $( document.body );

		$body.attr( 'aria-busy', 'true' );

		this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );

		currentPreviewDevice = this.$el.data( 'current-preview-device' );
		if ( currentPreviewDevice ) {
			self.togglePreviewDeviceButtons( currentPreviewDevice );
		}

		themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: false } );

		this.$el.fadeIn( 200, function() {
			$body.addClass( 'theme-installer-active full-overlay-active' );
		});

		this.$el.find( 'iframe' ).one( 'load', function() {
			self.iframeLoaded();
		});
	},

	iframeLoaded: function() {
		this.$el.addClass( 'iframe-ready' );
		$( document.body ).attr( 'aria-busy', 'false' );
	},

	close: function() {
		this.$el.fadeOut( 200, function() {
			$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );

			// Return focus to the theme div.
			if ( themes.focusedTheme ) {
				themes.focusedTheme.find('.more-details').trigger( 'focus' );
			}
		}).removeClass( 'iframe-ready' );

		// Restore the previous browse tab if available.
		if ( themes.router.selectedTab ) {
			themes.router.navigate( themes.router.baseUrl( '?browse=' + themes.router.selectedTab ) );
			themes.router.selectedTab = false;
		} else {
			themes.router.navigate( themes.router.baseUrl( '' ) );
		}
		this.trigger( 'preview:close' );
		this.undelegateEvents();
		this.unbind();
		return false;
	},

	collapse: function( event ) {
		var $button = $( event.currentTarget );
		if ( 'true' === $button.attr( 'aria-expanded' ) ) {
			$button.attr({ 'aria-expanded': 'false', 'aria-label': l10n.expandSidebar });
		} else {
			$button.attr({ 'aria-expanded': 'true', 'aria-label': l10n.collapseSidebar });
		}

		this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
		return false;
	},

	previewDevice: function( event ) {
		var device = $( event.currentTarget ).data( 'device' );

		this.$el
			.removeClass( 'preview-desktop preview-tablet preview-mobile' )
			.addClass( 'preview-' + device )
			.data( 'current-preview-device', device );

		this.togglePreviewDeviceButtons( device );
	},

	togglePreviewDeviceButtons: function( newDevice ) {
		var $devices = $( '.wp-full-overlay-footer .devices' );

		$devices.find( 'button' )
			.removeClass( 'active' )
			.attr( 'aria-pressed', false );

		$devices.find( 'button.preview-' + newDevice )
			.addClass( 'active' )
			.attr( 'aria-pressed', true );
	},

	keyEvent: function( event ) {
		// The escape key closes the preview.
		if ( event.keyCode === 27 ) {
			this.undelegateEvents();
			this.close();
		}
		// The right arrow key, next theme.
		if ( event.keyCode === 39 ) {
			_.once( this.nextTheme() );
		}

		// The left arrow key, previous theme.
		if ( event.keyCode === 37 ) {
			this.previousTheme();
		}
	},

	installTheme: function( event ) {
		var _this   = this,
		    $target = $( event.target );
		event.preventDefault();

		if ( $target.hasClass( 'disabled' ) ) {
			return;
		}

		wp.updates.maybeRequestFilesystemCredentials( event );

		$( document ).on( 'wp-theme-install-success', function() {
			_this.model.set( { 'installed': true } );
		} );

		wp.updates.installTheme( {
			slug: $target.data( 'slug' )
		} );
	}
});

// Controls the rendering of div.themes,
// a wrapper that will hold all the theme elements.
themes.view.Themes = wp.Backbone.View.extend({

	className: 'themes wp-clearfix',
	$overlay: $( 'div.theme-overlay' ),

	// Number to keep track of scroll position
	// while in theme-overlay mode.
	index: 0,

	// The theme count element.
	count: $( '.wrap .theme-count' ),

	// The live themes count.
	liveThemeCount: 0,

	initialize: function( options ) {
		var self = this;

		// Set up parent.
		this.parent = options.parent;

		// Set current view to [grid].
		this.setView( 'grid' );

		// Move the active theme to the beginning of the collection.
		self.currentTheme();

		// When the collection is updated by user input...
		this.listenTo( self.collection, 'themes:update', function() {
			self.parent.page = 0;
			self.currentTheme();
			self.render( this );
		} );

		// Update theme count to full result set when available.
		this.listenTo( self.collection, 'query:success', function( count ) {
			if ( _.isNumber( count ) ) {
				self.count.text( count );
				self.announceSearchResults( count );
			} else {
				self.count.text( self.collection.length );
				self.announceSearchResults( self.collection.length );
			}
		});

		this.listenTo( self.collection, 'query:empty', function() {
			$( 'body' ).addClass( 'no-results' );
		});

		this.listenTo( this.parent, 'theme:scroll', function() {
			self.renderThemes( self.parent.page );
		});

		this.listenTo( this.parent, 'theme:close', function() {
			if ( self.overlay ) {
				self.overlay.closeOverlay();
			}
		} );

		// Bind keyboard events.
		$( 'body' ).on( 'keyup', function( event ) {
			if ( ! self.overlay ) {
				return;
			}

			// Bail if the filesystem credentials dialog is shown.
			if ( $( '#request-filesystem-credentials-dialog' ).is( ':visible' ) ) {
				return;
			}

			// Pressing the right arrow key fires a theme:next event.
			if ( event.keyCode === 39 ) {
				self.overlay.nextTheme();
			}

			// Pressing the left arrow key fires a theme:previous event.
			if ( event.keyCode === 37 ) {
				self.overlay.previousTheme();
			}

			// Pressing the escape key fires a theme:collapse event.
			if ( event.keyCode === 27 ) {
				self.overlay.collapse( event );
			}
		});
	},

	// Manages rendering of theme pages
	// and keeping theme count in sync.
	render: function() {
		// Clear the DOM, please.
		this.$el.empty();

		// If the user doesn't have switch capabilities or there is only one theme
		// in the collection, render the detailed view of the active theme.
		if ( themes.data.themes.length === 1 ) {

			// Constructs the view.
			this.singleTheme = new themes.view.Details({
				model: this.collection.models[0]
			});

			// Render and apply a 'single-theme' class to our container.
			this.singleTheme.render();
			this.$el.addClass( 'single-theme' );
			this.$el.append( this.singleTheme.el );
		}

		// Generate the themes using page instance
		// while checking the collection has items.
		if ( this.options.collection.size() > 0 ) {
			this.renderThemes( this.parent.page );
		}

		// Display a live theme count for the collection.
		this.liveThemeCount = this.collection.count ? this.collection.count : this.collection.length;
		this.count.text( this.liveThemeCount );

		/*
		 * In the theme installer the themes count is already announced
		 * because `announceSearchResults` is called on `query:success`.
		 */
		if ( ! themes.isInstall ) {
			this.announceSearchResults( this.liveThemeCount );
		}
	},

	// Iterates through each instance of the collection
	// and renders each theme module.
	renderThemes: function( page ) {
		var self = this;

		self.instance = self.collection.paginate( page );

		// If we have no more themes, bail.
		if ( self.instance.size() === 0 ) {
			// Fire a no-more-themes event.
			this.parent.trigger( 'theme:end' );
			return;
		}

		// Make sure the add-new stays at the end.
		if ( ! themes.isInstall && page >= 1 ) {
			$( '.add-new-theme' ).remove();
		}

		// Loop through the themes and setup each theme view.
		self.instance.each( function( theme ) {
			self.theme = new themes.view.Theme({
				model: theme,
				parent: self
			});

			// Render the views...
			self.theme.render();
			// ...and append them to div.themes.
			self.$el.append( self.theme.el );

			// Binds to theme:expand to show the modal box
			// with the theme details.
			self.listenTo( self.theme, 'theme:expand', self.expand, self );
		});

		// 'Add new theme' element shown at the end of the grid.
		if ( ! themes.isInstall && themes.data.settings.canInstall ) {
			this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span></span></div><h2 class="theme-name">' + l10n.addNew + '</h2></a></div>' );
		}

		this.parent.page++;
	},

	// Grabs current theme and puts it at the beginning of the collection.
	currentTheme: function() {
		var self = this,
			current;

		current = self.collection.findWhere({ active: true });

		// Move the active theme to the beginning of the collection.
		if ( current ) {
			self.collection.remove( current );
			self.collection.add( current, { at:0 } );
		}
	},

	// Sets current view.
	setView: function( view ) {
		return view;
	},

	// Renders the overlay with the ThemeDetails view.
	// Uses the current model data.
	expand: function( id ) {
		var self = this, $card, $modal;

		// Set the current theme model.
		this.model = self.collection.get( id );

		// Trigger a route update for the current model.
		themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.id ) );

		// Sets this.view to 'detail'.
		this.setView( 'detail' );
		$( 'body' ).addClass( 'modal-open' );

		// Set up the theme details view.
		this.overlay = new themes.view.Details({
			model: self.model
		});

		this.overlay.render();

		if ( this.model.get( 'hasUpdate' ) ) {
			$card  = $( '[data-slug="' + this.model.id + '"]' );
			$modal = $( this.overlay.el );

			if ( $card.find( '.updating-message' ).length ) {
				$modal.find( '.notice-warning h3' ).remove();
				$modal.find( '.notice-warning' )
					.removeClass( 'notice-large' )
					.addClass( 'updating-message' )
					.find( 'p' ).text( wp.updates.l10n.updating );
			} else if ( $card.find( '.notice-error' ).length ) {
				$modal.find( '.notice-warning' ).remove();
			}
		}

		this.$overlay.html( this.overlay.el );

		// Bind to theme:next and theme:previous triggered by the arrow keys.
		// Keep track of the current model so we can infer an index position.
		this.listenTo( this.overlay, 'theme:next', function() {
			// Renders the next theme on the overlay.
			self.next( [ self.model.cid ] );

		})
		.listenTo( this.overlay, 'theme:previous', function() {
			// Renders the previous theme on the overlay.
			self.previous( [ self.model.cid ] );
		});
	},

	/*
	 * This method renders the next theme on the overlay modal
	 * based on the current position in the collection.
	 *
	 * @params [model cid]
	 */
	next: function( args ) {
		var self = this,
			model, nextModel;

		// Get the current theme.
		model = self.collection.get( args[0] );
		// Find the next model within the collection.
		nextModel = self.collection.at( self.collection.indexOf( model ) + 1 );

		// Confidence check which also serves as a boundary test.
		if ( nextModel !== undefined ) {

			// We have a new theme...
			// Close the overlay.
			this.overlay.closeOverlay();

			// Trigger a route update for the current model.
			self.theme.trigger( 'theme:expand', nextModel.cid );

		}
	},

	/*
	 * This method renders the previous theme on the overlay modal
	 * based on the current position in the collection.
	 *
	 * @params [model cid]
	 */
	previous: function( args ) {
		var self = this,
			model, previousModel;

		// Get the current theme.
		model = self.collection.get( args[0] );
		// Find the previous model within the collection.
		previousModel = self.collection.at( self.collection.indexOf( model ) - 1 );

		if ( previousModel !== undefined ) {

			// We have a new theme...
			// Close the overlay.
			this.overlay.closeOverlay();

			// Trigger a route update for the current model.
			self.theme.trigger( 'theme:expand', previousModel.cid );

		}
	},

	// Dispatch audible search results feedback message.
	announceSearchResults: function( count ) {
		if ( 0 === count ) {
			wp.a11y.speak( l10n.noThemesFound );
		} else {
			wp.a11y.speak( l10n.themesFound.replace( '%d', count ) );
		}
	}
});

// Search input view controller.
themes.view.Search = wp.Backbone.View.extend({

	tagName: 'input',
	className: 'wp-filter-search',
	id: 'wp-filter-search-input',
	searching: false,

	attributes: {
		type: 'search',
		'aria-describedby': 'live-search-desc'
	},

	events: {
		'input': 'search',
		'keyup': 'search',
		'blur': 'pushState'
	},

	initialize: function( options ) {

		this.parent = options.parent;

		this.listenTo( this.parent, 'theme:close', function() {
			this.searching = false;
		} );

	},

	search: function( event ) {
		// Clear on escape.
		if ( event.type === 'keyup' && event.which === 27 ) {
			event.target.value = '';
		}

		// Since doSearch is debounced, it will only run when user input comes to a rest.
		this.doSearch( event );
	},

	// Runs a search on the theme collection.
	doSearch: function( event ) {
		var options = {};

		this.collection.doSearch( event.target.value.replace( /\+/g, ' ' ) );

		// if search is initiated and key is not return.
		if ( this.searching && event.which !== 13 ) {
			options.replace = true;
		} else {
			this.searching = true;
		}

		// Update the URL hash.
		if ( event.target.value ) {
			themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + event.target.value ), options );
		} else {
			themes.router.navigate( themes.router.baseUrl( '' ) );
		}
	},

	pushState: function( event ) {
		var url = themes.router.baseUrl( '' );

		if ( event.target.value ) {
			url = themes.router.baseUrl( themes.router.searchPath + encodeURIComponent( event.target.value ) );
		}

		this.searching = false;
		themes.router.navigate( url );

	}
});

/**
 * Navigate router.
 *
 * @since 4.9.0
 *
 * @param {string} url - URL to navigate to.
 * @param {Object} state - State.
 * @return {void}
 */
function navigateRouter( url, state ) {
	var router = this;
	if ( Backbone.history._hasPushState ) {
		Backbone.Router.prototype.navigate.call( router, url, state );
	}
}

// Sets up the routes events for relevant url queries.
// Listens to [theme] and [search] params.
themes.Router = Backbone.Router.extend({

	routes: {
		'themes.php?theme=:slug': 'theme',
		'themes.php?search=:query': 'search',
		'themes.php?s=:query': 'search',
		'themes.php': 'themes',
		'': 'themes'
	},

	baseUrl: function( url ) {
		return 'themes.php' + url;
	},

	themePath: '?theme=',
	searchPath: '?search=',

	search: function( query ) {
		$( '.wp-filter-search' ).val( query.replace( /\+/g, ' ' ) );
	},

	themes: function() {
		$( '.wp-filter-search' ).val( '' );
	},

	navigate: navigateRouter

});

// Execute and setup the application.
themes.Run = {
	init: function() {
		// Initializes the blog's theme library view.
		// Create a new collection with data.
		this.themes = new themes.Collection( themes.data.themes );

		// Set up the view.
		this.view = new themes.view.Appearance({
			collection: this.themes
		});

		this.render();

		// Start debouncing user searches after Backbone.history.start().
		this.view.SearchView.doSearch = _.debounce( this.view.SearchView.doSearch, 500 );
	},

	render: function() {

		// Render results.
		this.view.render();
		this.routes();

		if ( Backbone.History.started ) {
			Backbone.history.stop();
		}
		Backbone.history.start({
			root: themes.data.settings.adminUrl,
			pushState: true,
			hashChange: false
		});
	},

	routes: function() {
		var self = this;
		// Bind to our global thx object
		// so that the object is available to sub-views.
		themes.router = new themes.Router();

		// Handles theme details route event.
		themes.router.on( 'route:theme', function( slug ) {
			self.view.view.expand( slug );
		});

		themes.router.on( 'route:themes', function() {
			self.themes.doSearch( '' );
			self.view.trigger( 'theme:close' );
		});

		// Handles search route event.
		themes.router.on( 'route:search', function() {
			$( '.wp-filter-search' ).trigger( 'keyup' );
		});

		this.extraRoutes();
	},

	extraRoutes: function() {
		return false;
	}
};

// Extend the main Search view.
themes.view.InstallerSearch =  themes.view.Search.extend({

	events: {
		'input': 'search',
		'keyup': 'search'
	},

	terms: '',

	// Handles Ajax request for searching through themes in public repo.
	search: function( event ) {

		// Tabbing or reverse tabbing into the search input shouldn't trigger a search.
		if ( event.type === 'keyup' && ( event.which === 9 || event.which === 16 ) ) {
			return;
		}

		this.collection = this.options.parent.view.collection;

		// Clear on escape.
		if ( event.type === 'keyup' && event.which === 27 ) {
			event.target.value = '';
		}

		this.doSearch( event.target.value );
	},

	doSearch: function( value ) {
		var request = {};

		// Don't do anything if the search terms haven't changed.
		if ( this.terms === value ) {
			return;
		}

		// Updates terms with the value passed.
		this.terms = value;

		request.search = value;

		/*
		 * Intercept an [author] search.
		 *
		 * If input value starts with `author:` send a request
		 * for `author` instead of a regular `search`.
		 */
		if ( value.substring( 0, 7 ) === 'author:' ) {
			request.search = '';
			request.author = value.slice( 7 );
		}

		/*
		 * Intercept a [tag] search.
		 *
		 * If input value starts with `tag:` send a request
		 * for `tag` instead of a regular `search`.
		 */
		if ( value.substring( 0, 4 ) === 'tag:' ) {
			request.search = '';
			request.tag = [ value.slice( 4 ) ];
		}

		$( '.filter-links li > a.current' )
			.removeClass( 'current' )
			.removeAttr( 'aria-current' );

		$( 'body' ).removeClass( 'show-filters filters-applied show-favorites-form' );
		$( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );

		// Get the themes by sending Ajax POST request to api.wordpress.org/themes
		// or searching the local cache.
		this.collection.query( request );

		// Set route.
		themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + encodeURIComponent( value ) ), { replace: true } );
	}
});

themes.view.Installer = themes.view.Appearance.extend({

	el: '#wpbody-content .wrap',

	// Register events for sorting and filters in theme-navigation.
	events: {
		'click .filter-links li > a': 'onSort',
		'click .theme-filter': 'onFilter',
		'click .drawer-toggle': 'moreFilters',
		'click .filter-drawer .apply-filters': 'applyFilters',
		'click .filter-group [type="checkbox"]': 'addFilter',
		'click .filter-drawer .clear-filters': 'clearFilters',
		'click .edit-filters': 'backToFilters',
		'click .favorites-form-submit' : 'saveUsername',
		'keyup #wporg-username-input': 'saveUsername'
	},

	// Initial render method.
	render: function() {
		var self = this;

		this.search();
		this.uploader();

		this.collection = new themes.Collection();

		// Bump `collection.currentQuery.page` and request more themes if we hit the end of the page.
		this.listenTo( this, 'theme:end', function() {

			// Make sure we are not already loading.
			if ( self.collection.loadingThemes ) {
				return;
			}

			// Set loadingThemes to true and bump page instance of currentQuery.
			self.collection.loadingThemes = true;
			self.collection.currentQuery.page++;

			// Use currentQuery.page to build the themes request.
			_.extend( self.collection.currentQuery.request, { page: self.collection.currentQuery.page } );
			self.collection.query( self.collection.currentQuery.request );
		});

		this.listenTo( this.collection, 'query:success', function() {
			$( 'body' ).removeClass( 'loading-content' );
			$( '.theme-browser' ).find( 'div.error' ).remove();
		});

		this.listenTo( this.collection, 'query:fail', function() {
			$( 'body' ).removeClass( 'loading-content' );
			$( '.theme-browser' ).find( 'div.error' ).remove();
			$( '.theme-browser' ).find( 'div.themes' ).before( '<div class="notice notice-error"><p>' + l10n.error + '</p><p><button class="button try-again">' + l10n.tryAgain + '</button></p></div>' );
			$( '.theme-browser .error .try-again' ).on( 'click', function( e ) {
				e.preventDefault();
				$( 'input.wp-filter-search' ).trigger( 'input' );
			} );
		});

		if ( this.view ) {
			this.view.remove();
		}

		// Sets up the view and passes the section argument.
		this.view = new themes.view.Themes({
			collection: this.collection,
			parent: this
		});

		// Reset pagination every time the install view handler is run.
		this.page = 0;

		// Render and append.
		this.$el.find( '.themes' ).remove();
		this.view.render();
		this.$el.find( '.theme-browser' ).append( this.view.el ).addClass( 'rendered' );
	},

	// Handles all the rendering of the public theme directory.
	browse: function( section ) {
		// Create a new collection with the proper theme data
		// for each section.
		if ( 'block-themes' === section ) {
			// Get the themes by sending Ajax POST request to api.wordpress.org/themes
			// or searching the local cache.
			this.collection.query( { tag: 'full-site-editing' } );
		} else {
			this.collection.query( { browse: section } );
		}
	},

	// Sorting navigation.
	onSort: function( event ) {
		var $el = $( event.target ),
			sort = $el.data( 'sort' );

		event.preventDefault();

		$( 'body' ).removeClass( 'filters-applied show-filters' );
		$( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );

		// Bail if this is already active.
		if ( $el.hasClass( this.activeClass ) ) {
			return;
		}

		this.sort( sort );

		// Trigger a router.navigate update.
		themes.router.navigate( themes.router.baseUrl( themes.router.browsePath + sort ) );
	},

	sort: function( sort ) {
		this.clearSearch();

		// Track sorting so we can restore the correct tab when closing preview.
		themes.router.selectedTab = sort;

		$( '.filter-links li > a, .theme-filter' )
			.removeClass( this.activeClass )
			.removeAttr( 'aria-current' );

		$( '[data-sort="' + sort + '"]' )
			.addClass( this.activeClass )
			.attr( 'aria-current', 'page' );

		if ( 'favorites' === sort ) {
			$( 'body' ).addClass( 'show-favorites-form' );
		} else {
			$( 'body' ).removeClass( 'show-favorites-form' );
		}

		this.browse( sort );
	},

	// Filters and Tags.
	onFilter: function( event ) {
		var request,
			$el = $( event.target ),
			filter = $el.data( 'filter' );

		// Bail if this is already active.
		if ( $el.hasClass( this.activeClass ) ) {
			return;
		}

		$( '.filter-links li > a, .theme-section' )
			.removeClass( this.activeClass )
			.removeAttr( 'aria-current' );
		$el
			.addClass( this.activeClass )
			.attr( 'aria-current', 'page' );

		if ( ! filter ) {
			return;
		}

		// Construct the filter request
		// using the default values.
		filter = _.union( [ filter, this.filtersChecked() ] );
		request = { tag: [ filter ] };

		// Get the themes by sending Ajax POST request to api.wordpress.org/themes
		// or searching the local cache.
		this.collection.query( request );
	},

	// Clicking on a checkbox to add another filter to the request.
	addFilter: function() {
		this.filtersChecked();
	},

	// Applying filters triggers a tag request.
	applyFilters: function( event ) {
		var name,
			tags = this.filtersChecked(),
			request = { tag: tags },
			filteringBy = $( '.filtered-by .tags' );

		if ( event ) {
			event.preventDefault();
		}

		if ( ! tags ) {
			wp.a11y.speak( l10n.selectFeatureFilter );
			return;
		}

		$( 'body' ).addClass( 'filters-applied' );
		$( '.filter-links li > a.current' )
			.removeClass( 'current' )
			.removeAttr( 'aria-current' );

		filteringBy.empty();

		_.each( tags, function( tag ) {
			name = $( 'label[for="filter-id-' + tag + '"]' ).text();
			filteringBy.append( '<span class="tag">' + name + '</span>' );
		});

		// Get the themes by sending Ajax POST request to api.wordpress.org/themes
		// or searching the local cache.
		this.collection.query( request );
	},

	// Save the user's WordPress.org username and get his favorite themes.
	saveUsername: function ( event ) {
		var username = $( '#wporg-username-input' ).val(),
			nonce = $( '#wporg-username-nonce' ).val(),
			request = { browse: 'favorites', user: username },
			that = this;

		if ( event ) {
			event.preventDefault();
		}

		// Save username on enter.
		if ( event.type === 'keyup' && event.which !== 13 ) {
			return;
		}

		return wp.ajax.send( 'save-wporg-username', {
			data: {
				_wpnonce: nonce,
				username: username
			},
			success: function () {
				// Get the themes by sending Ajax POST request to api.wordpress.org/themes
				// or searching the local cache.
				that.collection.query( request );
			}
		} );
	},

	/**
	 * Get the checked filters.
	 *
	 * @return {Array} of tags or false
	 */
	filtersChecked: function() {
		var items = $( '.filter-group' ).find( ':checkbox' ),
			tags = [];

		_.each( items.filter( ':checked' ), function( item ) {
			tags.push( $( item ).prop( 'value' ) );
		});

		// When no filters are checked, restore initial state and return.
		if ( tags.length === 0 ) {
			$( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' );
			$( '.filter-drawer .clear-filters' ).hide();
			$( 'body' ).removeClass( 'filters-applied' );
			return false;
		}

		$( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
		$( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' );

		return tags;
	},

	activeClass: 'current',

	/**
	 * When users press the "Upload Theme" button, show the upload form in place.
	 */
	uploader: function() {
		var uploadViewToggle = $( '.upload-view-toggle' ),
			$body = $( document.body );

		uploadViewToggle.on( 'click', function() {
			// Toggle the upload view.
			$body.toggleClass( 'show-upload-view' );
			// Toggle the `aria-expanded` button attribute.
			uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
		});
	},

	// Toggle the full filters navigation.
	moreFilters: function( event ) {
		var $body = $( 'body' ),
			$toggleButton = $( '.drawer-toggle' );

		event.preventDefault();

		if ( $body.hasClass( 'filters-applied' ) ) {
			return this.backToFilters();
		}

		this.clearSearch();

		themes.router.navigate( themes.router.baseUrl( '' ) );
		// Toggle the feature filters view.
		$body.toggleClass( 'show-filters' );
		// Toggle the `aria-expanded` button attribute.
		$toggleButton.attr( 'aria-expanded', $body.hasClass( 'show-filters' ) );
	},

	/**
	 * Clears all the checked filters.
	 *
	 * @uses filtersChecked()
	 */
	clearFilters: function( event ) {
		var items = $( '.filter-group' ).find( ':checkbox' ),
			self = this;

		event.preventDefault();

		_.each( items.filter( ':checked' ), function( item ) {
			$( item ).prop( 'checked', false );
			return self.filtersChecked();
		});
	},

	backToFilters: function( event ) {
		if ( event ) {
			event.preventDefault();
		}

		$( 'body' ).removeClass( 'filters-applied' );
	},

	clearSearch: function() {
		$( '#wp-filter-search-input').val( '' );
	}
});

themes.InstallerRouter = Backbone.Router.extend({
	routes: {
		'theme-install.php?theme=:slug': 'preview',
		'theme-install.php?browse=:sort': 'sort',
		'theme-install.php?search=:query': 'search',
		'theme-install.php': 'sort'
	},

	baseUrl: function( url ) {
		return 'theme-install.php' + url;
	},

	themePath: '?theme=',
	browsePath: '?browse=',
	searchPath: '?search=',

	search: function( query ) {
		$( '.wp-filter-search' ).val( query.replace( /\+/g, ' ' ) );
	},

	navigate: navigateRouter
});


themes.RunInstaller = {

	init: function() {
		// Set up the view.
		// Passes the default 'section' as an option.
		this.view = new themes.view.Installer({
			section: 'popular',
			SearchView: themes.view.InstallerSearch
		});

		// Render results.
		this.render();

		// Start debouncing user searches after Backbone.history.start().
		this.view.SearchView.doSearch = _.debounce( this.view.SearchView.doSearch, 500 );
	},

	render: function() {

		// Render results.
		this.view.render();
		this.routes();

		if ( Backbone.History.started ) {
			Backbone.history.stop();
		}
		Backbone.history.start({
			root: themes.data.settings.adminUrl,
			pushState: true,
			hashChange: false
		});
	},

	routes: function() {
		var self = this,
			request = {};

		// Bind to our global `wp.themes` object
		// so that the router is available to sub-views.
		themes.router = new themes.InstallerRouter();

		// Handles `theme` route event.
		// Queries the API for the passed theme slug.
		themes.router.on( 'route:preview', function( slug ) {

			// Remove existing handlers.
			if ( themes.preview ) {
				themes.preview.undelegateEvents();
				themes.preview.unbind();
			}

			// If the theme preview is active, set the current theme.
			if ( self.view.view.theme && self.view.view.theme.preview ) {
				self.view.view.theme.model = self.view.collection.findWhere( { 'slug': slug } );
				self.view.view.theme.preview();
			} else {

				// Select the theme by slug.
				request.theme = slug;
				self.view.collection.query( request );
				self.view.collection.trigger( 'update' );

				// Open the theme preview.
				self.view.collection.once( 'query:success', function() {
					$( 'div[data-slug="' + slug + '"]' ).trigger( 'click' );
				});

			}
		});

		/*
		 * Handles sorting / browsing routes.
		 * Also handles the root URL triggering a sort request
		 * for `popular`, the default view.
		 */
		themes.router.on( 'route:sort', function( sort ) {
			if ( ! sort ) {
				sort = 'popular';
				themes.router.navigate( themes.router.baseUrl( '?browse=popular' ), { replace: true } );
			}
			self.view.sort( sort );

			// Close the preview if open.
			if ( themes.preview ) {
				themes.preview.close();
			}
		});

		// The `search` route event. The router populates the input field.
		themes.router.on( 'route:search', function() {
			$( '.wp-filter-search' ).trigger( 'focus' ).trigger( 'keyup' );
		});

		this.extraRoutes();
	},

	extraRoutes: function() {
		return false;
	}
};

// Ready...
$( function() {
	if ( themes.isInstall ) {
		themes.RunInstaller.init();
	} else {
		themes.Run.init();
	}

	// Update the return param just in time.
	$( document.body ).on( 'click', '.load-customize', function() {
		var link = $( this ), urlParser = document.createElement( 'a' );
		urlParser.href = link.prop( 'href' );
		urlParser.search = $.param( _.extend(
			wp.customize.utils.parseQueryString( urlParser.search.substr( 1 ) ),
			{
				'return': window.location.href
			}
		) );
		link.prop( 'href', urlParser.href );
	});

	$( '.broken-themes .delete-theme' ).on( 'click', function() {
		return confirm( _wpThemeSettings.settings.confirmDelete );
	});
});

})( jQuery );

// Align theme browser thickbox.
jQuery( function($) {
	window.tb_position = function() {
		var tbWindow = $('#TB_window'),
			width = $(window).width(),
			H = $(window).height(),
			W = ( 1040 < width ) ? 1040 : width,
			adminbar_height = 0;

		if ( $('#wpadminbar').length ) {
			adminbar_height = parseInt( $('#wpadminbar').css('height'), 10 );
		}

		if ( tbWindow.length >= 1 ) {
			tbWindow.width( W - 50 ).height( H - 45 - adminbar_height );
			$('#TB_iframeContent').width( W - 50 ).height( H - 75 - adminbar_height );
			tbWindow.css({'margin-left': '-' + parseInt( ( ( W - 50 ) / 2 ), 10 ) + 'px'});
			if ( typeof document.body.style.maxWidth !== 'undefined' ) {
				tbWindow.css({'top': 20 + adminbar_height + 'px', 'margin-top': '0'});
			}
		}
	};

	$(window).on( 'resize', function(){ tb_position(); });
});
مذيع من كود…من الأستوديو إلى الخوارزمية: المذيع الافتراضي ثورة تقنية أم اغتيال للهوية الإعلامية؟ – tahkoom.com
خطوة

مذيع من كود…من الأستوديو إلى الخوارزمية: المذيع الافتراضي ثورة تقنية أم اغتيال للهوية الإعلامية؟

 كتبت: فرح سمير

 في زمنٍ باتت فيه المذيعة تبتسم دون أن تملك روحًا، ويقدّم المذيع نشرة الأخبار دون أن يشعر بمحتواها، يطرح الواقع الإعلامي سؤالًا صادمًا: هل دخلنا عصر “المذيع الافتراضي” بالفعل؟

لم يعد ظهور مذيعين مدعومين بالذكاء الاصطناعي على شاشات عربية وعالمية مجرد تجربة تقنية، بل أصبح واقعًا يفرض حضوره ويثير القلق، لا سيما بين طلاب الإعلام وممارسيه، الذين يرون في هذه “الكائنات الرقمية” تهديدًا صامتًا لمهنتهم وهويتهم المهنية.

 تعود جذور هذه الظاهرة إلى أوائل الألفينات، حين ظهرت أول مذيعة افتراضية على الإنترنت تُدعى “أنانوفا” (Ana-nova)، والتي تم تقديمها عام 2000 بواسطة شركة Ana-nova Ltd التابعة لوكالة الأنباء البريطانية Press Association. كانت أنانوفا تُقدم نشرات إخبارية عبر الإنترنت، وتميزت بقدرتها على تقديم تحديثات فورية في مجالات الأخبار، الطقس، الرياضة، وأسعار الأسهم، في مدة لا تتجاوز سبع دقائق، إلا أن المشروع لم يُستكمل.

 وفي عام 2018، قدمت صحيفة “People’s Daily” الصينية مذيعة افتراضية تُدعى “رين شياورونغ” (Ren Xiaorong)، وهي روبوت مدعوم بالذكاء الاصطناعي قادر على التعلم من آلاف المذيعين البشريين، وتمتاز بقدرتها على التطور المستمر بناءً على تفاعل الجمهور، وتعمل على مدار الساعة طوال أيام الأسبوع.

 بحلول عام 2019، شهدت الصين توسعًا كبيرًا في استخدام المذيعين الافتراضيين، حيث أصبحت منصة “بيلي بيلي” (Bilibili) موطنًا لأكثر من 230,000 مذيع افتراضي يقدمون محتوى متنوعًا يستهدف فئة الشباب.

 ومع هذه التطورات، بدأت دول أخرى في تبني تقنيات المذيعين الافتراضيين. ففي عام 2023، قدمت الكويت أول مذيعة افتراضية في العالم العربي تُدعى “فضة” (Fedha)، حيث ظهرت على موقع “Kuwait News” وتحدثت باللغة العربية الفصحى، مقدّمة الأخبار بناءً على تفضيلات الجمهور.

 كما أطلقت قطر مذيعتين افتراضيتين تُدعيان “ابتكار” و“نورا” لتعزيز استخدام الذكاء الاصطناعي في تقديم المحتوى الإعلامي، بينما ظهرت في مصر أول مذيعة افتراضية في فبراير 2023، مما يعكس التوجه المتزايد نحو دمج التقنيات الحديثة في المجال الإعلامي.

 ما بين الحي والرقمي: هل يُقصي الذكاء الاصطناعي الإعلامي البشري؟” المهنة في مواجهة الخوارزميات: المذيعون الحقيقيون يتحدثون

الإعلامية – دعاء فاروق

في رأيها حول الذكاء الاصطناعي وظاهرة “المذيع الافتراضي”، تؤكد الإعلامية دعاء فاروق أن الإخلاص هو جوهر النجاح في العمل الإعلامي وغيره، مشيرة إلى أن النجاح الحقيقي لا يتحقق إلا بالإخلاص في القول والعمل، حتى وإن تأخر، فإنه سيأتي في النهاية بشكل مرضٍ.

وترى فاروق أن المذيع الافتراضي، رغم برمجته بأي لهجة أو خفة ظل، لا يمكنه أن يحاكي الروح الإنسانية، مؤكدة أن “الروح لا تُبرمج، والقبول الروحي لا يُصنع”، فالإنسان يتمتع بخفة ظل طبيعية وشخصية لا يمكن تقليدها برمجياً.

وتوضح أن الذكاء الاصطناعي قادر على تجميع المعلومات الدينية من الإنترنت، لكنه لا يمكن أن يعوّض التفاعل الإنساني في الفتوى أو المشورة، مشددة على أن “العلماء والشيوخ هم أصحاب علم وتجربة ووعي بالسياق”، في حين أن الذكاء الاصطناعي مجرد محرك بحث يخضع لبرمجة بشرية قد تخطئ.

وتؤمن دعاء بأن المذيع البشري لا يمكن استبداله، خاصة في البرامج ذات الطابع الديني أو الإنساني، لأن “الفنان أو المذيع كتلة من المشاعر”، بينما الذكاء الاصطناعي “لا يستطيع البكاء الحقيقي، ولا التعبير عن الحزن أو التفاعل مع موقف موجع”، مضيفة أن العقل البشري قادر على تمييز المشاعر الحقيقية من الزائفة، حتى وإن كانت البرمجة متقنة.

وفيما يخص التكيف مع التطور، تدعو فاروق الإعلاميين إلى مواكبة أدوات العصر وفهم الذكاء الاصطناعي، لكن دون التخلي عن الهوية الإنسانية والبصمة الشخصية، قائلة: “كل مذيع له بصمة لا يمكن للذكاء الاصطناعي تقليدها”، فالاعتماد على الورقة والقلم وحده لم يعد كافيًا، ويجب على الإعلامي أن يتواصل مع جمهور اليوم بأدوات حديثة دون التفريط بروحه الإنسانية.

وتقر بوجود تهديدات من الذكاء الاصطناعي لبعض الوظائف الروتينية، لكنها تؤكد أنه لن يحل محل من يخاطب الناس ويشعر بهم، مضيفة: “لم أشاهد روبوتًا يمكن أن أصدقه أو أرتبط به عاطفيًا، الذكاء الاصطناعي سيبقى بلا روح.”

وفي ختام حديثها، توجّه رسالة إلى الإعلاميين الشباب، تحثهم فيها على الصبر وتجنّب استعجال الشهرة أو الثراء، مشددة على أن “النجاح الحقيقي لا يأتي في يوم وليلة”، بل هو نجاح تراكمي يُبنى بالتعب والمتابعة والزرع الدائم، مؤكدة أن النجاح السريع يزول سريعًا، بينما النجاح المتين هو من يصنع الاسم والقيمة الجماهيرية.

 الإعلامية “ايتن الموجى

حيث ترى الإعلامية آيتن الموجي أن التكنولوجيا أحدثت تطورًا كبيرًا في جميع المجالات، خاصة الإعلام، لما له من دور في تشكيل الوعي. وتصف فكرة “المذيع الافتراضي” بأنها رائعة، نظرًا لما يتمتع به من ثقافة موسوعية وخلوه من العيوب البشرية مثل التقدم في العمر أو تغير الشكل، كما ترى أن وجوده قد يخلق غيرة مهنية إيجابية تدفع المذيعين البشريين لبذل جهد أكبر من أجل التميز.

مع ذلك، تؤكد أن المذيع الافتراضي يفتقر إلى الجانب الإنساني، مثل المشاعر ولمعة العين والتفاعل الحي في المواقف الإنسانية، مشيرة إلى أن هذه التفاصيل لا يمكن أن يتقنها الذكاء الاصطناعي. وتوضح أن بعض الأنماط الإعلامية مثل الحوارات، تغطية الجرائم، الحروب، وبرامج المسابقات، تحتاج إلى حضور بشري حقيقي وتفاعل مباشر لا يستطيع “الأفاتار” تقديمه.

وتشدد الموجي على أن الخبرة والتجارب الشخصية تصقل الإنسان وتمنحه نضجًا لا يمكن للتكنولوجيا أن تحاكيه، مشبهة الذكاء الاصطناعي بأنه قد يبهر في البداية لكن سرعان ما يصيب المستخدم بالملل بسبب إجاباته المبرمجة. وتؤمن بأهمية مواكبة الإعلاميين للتطور التكنولوجي، مع ضرورة التواضع والتعلم المستمر.

أما تأثير المذيع الافتراضي على فرص العمل، فتعتقد أنه سيكون ملموسًا في البداية، إذ قد تفضل بعض المؤسسات الاعتماد عليه كحل أقل تكلفة، لكنها ترى أن المذيع البشري سيظل مميزًا، مرجحة أن يظهر مستقبلًا تعاون أو تناغم بين الطرفين يُنتج أفكارًا مبتكرة وجديدة.

 الاعلامى – احمد سالم

كما يرى الإعلامي أحمد سالم أن المذيعين الافتراضيين لا يشكّلون تهديدًا حقيقيًا للمذيع البشري، لأن التواصل الإنساني لا يمكن تعويضه. ويشير إلى أن التجربة الممتدة لأكثر من عام لم تنتج مذيعًا افتراضيًا لافتًا، مؤكدًا أن الإعلام والفنون تقوم على التفاعل المباشر، وهو ما يفتقر إليه الذكاء الاصطناعي.

ويُبرز سالم أن الميزة الكبرى للمذيع البشري تكمن في رأيه الحي وغير المبرمج، على عكس الذكاء الاصطناعي الذي يعتمد على تغذية مسبقة، موضحًا أن طرح نفس السؤال على عشرة مذيعين سينتج عشر إجابات مختلفة، وهو ما لا يمكن تحقيقه افتراضيًا.

ويؤكد أن البرامج التي تعتمد على بصمة المذيع وطابعه الشخصي يصعب أن ينجح فيها الذكاء الاصطناعي، لأن الثقافة العامة والخبرة الشخصية لا تُبرمجان، مشبّهًا الفرق بين المحتوى الآلي والإنساني بالفرق بين مقال كتبه روبوت وقصيدة كتبها شاعر، فـالموهبة لا تُستنسخ.

ويرى أن الذكاء الاصطناعي يمكن أن يكون أداة مفيدة للمذيع في جمع وتحليل المعلومات، لكن تبقى الصنعة الإعلامية في جوهرها إنسانية. ورغم أنه لا يتوقع تقليصًا مباشرًا للوظائف، إلا أنه يحذر من تأثيرات الواقع الافتراضي على سوق العمل، كما حدث في مهن أخرى، لكنه يؤمن بأن التطور يخلق أيضًا فرصًا جديدة للابتكار.

ويعتبر أن دور المذيع الافتراضي سيبقى محدودًا في النشرات الجافة والمواد غير التفاعلية، ساخرًا من أدائه بقوله: “دمه تقيل”، في إشارة لغياب القبول الجماهيري.

وفي ختام حديثه، ينصح الإعلاميين الشباب بـتنمية ثقافتهم وتطوير أنفسهم للحفاظ على تفوقهم الإنساني، مؤكدًا أن المعرفة والوعي هما الضمان الحقيقي لبقاء الإنسان في الصدارة.

 الإعلامى – طه الحديري

ويرى الإعلامي طه الحديري أن المذيع الافتراضي، رغم دقته وكفاءته التقنية، يفتقر للروح، وهي أهم ما يميز الإنسان، مؤكدًا أن التكنولوجيا لا تستطيع محاكاة مشاعر المذيع البشري أو التعبير الحقيقي عن المواقف الإنسانية، مثل قصة أم شهيد أو حوار مع طفل يتيم، لأن أداؤه قائم على برمجة مسبقة تفتقر للنضج والتراكم الشعوري.

ويؤكد أن المذيع الافتراضي محكوم بالمعلومات التي زُوِّد بها ولا يمكنه الإبداع أو الخروج عنها، على عكس المذيع البشري الذي يحلل ويتأقلم مع الواقع. ويضرب مثالًا بنموذج ذكي وصف ترامب بأنه “رجل اقتصاد قوي”، في حين أن الإعلاميين البشريين قدموا تحليلات أدق وتوقعوا الرفض العالمي لسياساته.

ويشير إلى أن البرامج الفنية والإنسانية والشعرية يصعب على الذكاء الاصطناعي أن ينافس فيها، لأنها تتطلب تذوقًا إنسانيًا حقيقيًا لا يمكن برمجته. ويستشهد ببرنامج افتراضي عن الأغاني، موضحًا أن المذيع البشري يمكنه استحضار روح الشاعر والمعنى العاطفي للأغنية، بينما الافتراضي يكتفي بسرد معلومات.

ويعتبر أن الذكاء الاصطناعي ليس بديلاً، بل حافزًا لتطوير المذيع البشري، مشددًا على أن زمن الظهور التلفزيوني القائم على الشكل والترند قد انتهى، وأن الاستمرار في المجال يعتمد على المحتوى، والثقافة، والقدرة على فهم الجمهور.

ويحذّر الإعلاميين الجدد من الاعتماد على النقل النظري والتكرار، داعيًا إلى تقديم تحليلات وتجارب واقعية بدلًا من نصوص محفوظة، لأن الجمهور بات أكثر وعيًا ويصعب التأثير فيه بمظهر أو صوت جميل فقط.

وفي ختام رأيه، يؤكد الحديري أن الذكاء الاصطناعي لن يحل محل الإنسان، بل يرى مستقبلًا قائمًا على التكامل بين الطرفين، بحيث يكون الذكاء الاصطناعي مساعدًا ومرجعًا، ويظل الإعلامي البشري هو من يمنح الشاشة الروح التي لا تُستنسخ.

 هل نُعدّ طلاب الإعلام لمهنة قد تختفي؟

رغم التطور المتسارع لتقنيات الذكاء الاصطناعي واقتحامها مجالات الإعلام، ما زال المذيع الافتراضي يواجه تحديات تتعلق بثقة الجمهور، وقبول المتلقي، وغياب الحس الإنساني، كما تكشف آراء طلاب الإعلام الذين شاركوا في هذا الاستبيان.

في إجاباتهم حول الفروقات الجوهرية بين المذيع البشري ونظيره الافتراضي، اتفقت الغالبية على أن العنصر الإنساني يمثل جوهر العمل الإعلامي. فأداء المذيع البشري لا يقتصر على نقل المعلومة، بل يمتد إلى إيصال المشاعر، والتفاعل اللحظي مع الجمهور، والقدرة على الارتجال، وهي عناصر وصفها أحد المشاركين بأنها “لا يمكن صناعتها آليًا مهما تطورت التكنولوجيا”.

وعند سؤالهم عن الهوية الإعلامية، أجمعت الآراء تقريبًا على أهمية الحفاظ على الإنسان كجزء من عملية التواصل الإعلامي. “روح الإنسان”، “المصداقية”، و” القدرة على التغيير المجتمعي” كانت كلمات تكررت مرارًا، في تعبير واضح عن القلق من أن يؤدي الاعتماد الكلي على الذكاء الاصطناعي إلى تجريد الإعلام من وظيفته التشاركية والوجدانية.

أما عند عرض مشاهد لمذيعين افتراضيين، تنوعت مشاعر المشاركين بين القلق، الغرابة، وعدم الارتياح. وعبّر البعض عن شعور “بالخوف” أو “عدم المصداقية”، وهو ما يعكس فجوة كبيرة لا تزال قائمة بين تطور التكنولوجيا ومستوى تقبل الجمهور لها.

ومن زاوية سوق العمل، أبدى 75% من المشاركين خشيتهم من أن تؤدي هذه التقنية إلى تقليص الفرص المستقبلية للكوادر الإعلامية. ورغم أن قلةً رأت أنها قد تخلق فرصًا جديدة، إلا أن هذه الرؤية ما تزال محدودة أمام مخاوف الإقصاء المهني.

وعن سؤال قدرة المذيع الافتراضي على إعداد المحتوى والتفاعل كمراسل، رفضت الأغلبية الفكرة، مشيرة إلى أن الإعلامي البشري لا يُستبدل، لما يملكه من وعي وسياق وقراءة للمواقف لا يمكن برمجتها بسهولة.

اللافت أن الآراء انقسمت بالتساوي عندما طُرح سؤال مباشر حول الثقة في محتوى يقدمه مذيع افتراضي، ما يشير إلى أن الذكاء الاصطناعي قد يكسب مساحة من الثقة، لكنها لا تزال محدودة ومشروطة

 وجه جميل وصوت دقيق… لكن أين التعاطف؟

ومن الزاوية النفسية، يشير د. وليد هندي، استشاري الصحة النفسية، إلى أن المذيع الافتراضي – رغم كونه إنجازًا تقنيًا لافتًا – يظل كيانًا ناقصًا نفسيًا، يفتقد إلى مقومات التأثير الوجداني العميق في الجمهور. فهو لا يمتلك هوية نفسية متكاملة، ولا يُتيح مساحة للتفاعل العاطفي الحقيقي، الذي يُعدّ أحد أهم عناصر التأثير الإعلامي. ويضيف: “رغم أن هذه الشخصيات الرقمية قد تُسهّل إيصال المحتوى لبعض الفئات كالمكفوفين أو غير المتعلمين، إلا أنها لا تُعوض الأثر النفسي الذي يتركه المذيع البشري في وعي ووجدان المتلقي”.

 يرى هندي أن شخصية الأفاتار تفتقر لما يُعرف في علم النفس بـ” الاستبصار” أو “الإدراك التصحيحي”، إذ إنها تُردد ما تتلقاه من بيانات دون مراجعة أو وعي، مما يجعلها عرضة لتكرار الأخطاء دون تمييز. ويشير إلى أن المذيع الحقيقي وحده من يملك هذه القدرة النفسية على مراجعة الذات، والتفاعل مع الموقف بناءً على خلفية وجدانية وشخصية متكاملة.

 في لحظات الألم، كعرض مشاهد الحرب أو الكوارث، أو في لحظات الفرح، كفوز فريق وطني، يبرز الفرق الجوهري بين الإنسان والآلة. المذيع البشري قد تتغير نبرته، ينكسر صوته، يبكي، يضحك، ويتلعثم. كلها إشارات نفسية تُحدث أثرًا عاطفيًا لدى المتلقي، وتُفعّل ما يُعرف في علم النفس بـ” التناغم الشعوري”. بينما يظل الأفاتار محايدًا، بارداً، وكأنه يقرأ من ورقة.

 ويضيف: “المذيع الحقيقي يملك مهارات ارتجال فريدة تُعرف بالاحتواء اللحظي، فينقذ الموقف حين يحدث خلل على الهواء أو فراغ في البث، أما المذيع الافتراضي فمحكوم ببرمجة جامدة لا تعترف بالحساسية النفسية للحظة”.

 كما يشير إلى جانب نفسي بالغ الأهمية، وهو “الانتماء المهني”، والذي يتشكل من مشاعر فخر، وكفاح، وتاريخ طويل من النجاحات والانكسارات. المذيع البشري ابن المؤسسة التي يعمل بها، يشعر تجاهها، يدافع عنها، يتألم لألمها ويفرح بنجاحها. وهو ما يستحيل زرعه في شخصية افتراضية خالية من العاطفة.

 ويتابع حديثه بالإشارة إلى أثر المذيع البشري في تكوين الطموح لدى الأطفال والمراهقين، مؤكدًا أن هذه الشخصيات تشكّل قدوة نفسية حقيقية، تُغذّي الخيال والهوية. “كنت أتتبع المذيع أحمد سمير، وأقلده في صوته وربطة عنقه، وتكوّنت لدي رغبة حقيقية في أن أكون مثله… فهل يمكن للطفل أن يحلم أن يكون أفاتار؟!”.

 ويختم الدكتور وليد هندي بقوله: “رغم إعلان دول كبرى – مثل الصين – عن آلاف من المذيعين الافتراضيين، لم نرَ لهم تأثيرًا نفسيًا أو وجدانيًا يُذكر. ببساطة، لأنهم يفتقرون للروح، والروح هي أساس كل تواصل إنساني حقيقي. المذيع الافتراضي… وهم عظيم تقنيًا، لكنه فقير وجدانيًا

مهندس ذكاء اصطناعي: اللهجة المصرية.. تحدٍ مستمر للآلة

صرح المهندس أحمد رأفت، مهندس ميكانيكا ومتخصص في أدوات الذكاء الاصطناعي، حول استخدام تقنيات الذكاء الاصطناعي في مجال الصوت والفيديو، مسلطًا الضوء على التحديات والفرص المتاحة.

وأوضح المهندس رأفت أن استخدام تقنيات الصوت يمر بمراحل متدرجة، تبدأ بتقنية “النص إلى كلام” التقليدية، والتي وصفها بأنها ذات جودة محدودة وتبدو ميكانيكية. وأشار إلى المستوى الثاني الذي يستخدم منصات الذكاء الاصطناعي باللغة الإنجليزية لإنتاج صوت يقترب من اللهجة المصرية، ولكنه لا يرتقي إلى جودة اللهجة الأصلية.

 أما المستوى الثالث، وفقًا لتصريحات المهندس رأفت، فيعتمد على تسجيل الصوت بلهجة مصرية طبيعية واستخدام برامج تغيير الصوت لمحاكة أصوات شخصيات معينة، معتبرًا هذه الطريقة الأعلى جودة للوصول إلى لهجة مصرية واقعية.

 وفيما يتعلق بالمستوى الرابع والأعلى، لفت المهندس إلى أنه يعتمد على كتابة النص بالعربية الفصحى أو العامية وتشكيله لغويًا، ثم استخدام نماذج مدربة على نطق اللهجة المصرية، مع الإشارة إلى التحديات القائمة نظرًا لعدم تدريب معظم النماذج بشكل كافٍ على هذه اللهجة.

 أكد المهندس رأفت على أن “اللكنة المصرية تحديدًا تُعد من أصعب اللهجات التي يمكن للذكاء الاصطناعي محاكاتها بدقة، وذلك لأنها خليط لغوي يجمع بين عدة لغات، مما يجعل إتقانها تحديًا لنماذج الذكاء الاصطناعي، خاصة مع محدودية تدريبها على اللغة العربية أصلًا.”

بالانتقال إلى تجهيز الفيديو، شرح المهندس إمكانية تركيب الصوت على فيديو حقيقي أو صورة، مع الإشارة إلى منصات مثل Magic AI التي تتيح إنشاء فيديوهات أو صور متحركة بمدة محدودة في النسخة المجانية. كما تطرق إلى استخدام المواقع لمعلقين صوتيين جاهزين لإنشاء ما يُعرف بالمذيعين الافتراضيين، مع ملاحظة أن هذه الطرق قد لا تقدم أفضل جودة في التفاعل الصوتي والتعبير عن المشاعر.

 وفي ختام تصريحه، أكد المهندس أحمد رأفت على أن “التفاعل الحقيقي مع الصوت والمشاعر ما يزال يتطلب تدخلاً بشريًا”، مشيرًا إلى أن المشاعر المرتبطة بنبرة الصوت لا تزال غير مدعومة بالكامل في الذكاء الاصطناعي. ولكنه نوّه إلى الميزة الاقتصادية لهذه التقنيات، حيث إن تكلفتها “منخفضة جدًا مقارنة بأجور المذيعين البشريين.”

 نقابة الإعلاميين تؤكد: الذكاء الاصطناعي فرصة لتطوير الأداء الإعلامي مع الحفاظ على الدور الإنساني

يرى أيمن عدلي مهدي، رئيس لجنة التدريب والتثقيف بنقابة الإعلاميين، أن ظاهرة المذيعين الافتراضيين تمثل انعكاسًا طبيعيًا للتطور التكنولوجي السريع الذي يشهده الإعلام، نتيجة اندماج الذكاء الاصطناعي المتزايد في إنتاج وتقديم المحتوى.

ويشير إلى أن نقابة الإعلاميين تتعامل مع هذه الظاهرة من زاويتين: الأولى: أنها قد ترفع من كفاءة الإنتاج وجودة المحتوى. الثانية: أنها تثير تساؤلات حول المصداقية والجانب الإنساني الذي لا يمكن تعويضه.

ويؤكد أن الإعلام التنموي، الذي يهدف إلى بناء الوعي المجتمعي والإنساني، لا يمكن أن يؤديه الذكاء الاصطناعي منفردًا، لأنه يتطلب تفاعلًا إنسانيًا مباشرًا لا توفره التقنيات مهما تطورت. لذلك، ترى النقابة أن المذيع الافتراضي ليس مجرد تقنية، بل عنصر جديد في المشهد الإعلامي يجب ضبطه بضوابط مهنية دقيقة، تحمي دور الإعلامي البشري في صناعة الوعي وتشكيل الرأي العام.

ورغم عدم وجود إطار تنظيمي شامل حتى الآن لضبط عمل المذيعين الافتراضيين، إلا أن النقابة تعمل بالتعاون مع المجلس الأعلى لتنظيم الإعلام على وضع آليات قانونية ومهنية تضمن التزام المحتوى المقدم عبر الذكاء الاصطناعي بالمعايير الأخلاقية والمهنية.

ويترافق هذا التوجه مع ضرورة تطوير برامج تدريبية للإعلاميين، لضمان جاهزيتهم في استخدام هذه الأدوات بكفاءة وتوازن بين التقنية والرسالة الإعلامية.

وفيما يخص مستقبل الإعلاميين مع الذكاء الاصطناعي، يؤكد عدلي أن النقابة لا تراه تهديدًا، بل فرصة كبيرة لتطوير الأداء الإعلامي، بشرط أن يُحسن الإعلاميون استخدام هذه الأدوات.

فالمهارات الجديدة، مثل التعامل مع البيانات وتحسين جودة الإنتاج، أصبحت أساسية، لكنها لا تلغي أهمية التحليل والتفاعل الإنساني وقراءة السياقات الاجتماعية والثقافية.

ويختتم بالتأكيد على وجود نية داخل النقابة لوضع مدونة سلوك وإرشادات مهنية واضحة، تتضمن: ضوابط لاستخدام المذيعين الافتراضيين، آليات لضمان الالتزام المهني، برامج تدريبية للجيل الجديد من الإعلاميين، ليكونوا مؤهلين للتعامل مع سوق إعلامي متغير لا يُقصي الإنسان، بل يتطلب منه التطور المستمر.

 المذيع الافتراضي واقع لا مفر منه، وتقنية تتطور بسرعة مذهلة، وقد تفرض نفسها في مساحات واسعة من الإعلام. لكن رغم ذلك، تبقى للمذيع البشري كاريزما خاصة، ودفء إنساني، وتفاعل حي لا يمكن تقليده أو برمجته، فالذكاء الاصطناعي قد يحفظ المعلومة، ينسّقها، يعرضها، بل وربما يتقن الإلقاء والتفاعل السطحي، لكنه يظل “بلا روح”، في حين أن المذيع الحقيقي يُشبه القصيدة الحيّة، تنبض بكل كلمة، وتنقل المعنى والمشاعر

اظهر المزيد

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى